create datatables from json array

Question

Firstly sorry for my bad explaination.Currently ,I have a table that probably will be inserted data until 3000 and I got suggestion by people to use datatables.But I'm really new in this and I already try another datatables examples but still not working.

I already create datatables for server-side that is Object data source but seem like it not working well as what I expected .Please help me to show the correct way how to create datatables by json Object data source .Below is my code :

        <script type="text/javascript" charset="utf8" src="../cdc/datatables/media/js/jquery-1.11.1.min.js"></script>

        <script type="text/javascript" charset="utf8" src="../cdc/datatables/media/js/jquery.dataTables.min.js"></script>

        <script language="javascript">
$(document).ready(function() {
    $('#cdcTracking-list').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../cdc/load/jsonTrack.php",
        "columns": [
            { "elements": "vesselCode" },
            { "elements": "voyage" },
            { "elements": "chasisNo" },
            { "elements": "plateNo" },
            { "elements": "bookingRef" },
            { "elements": "serviceTerm" }
        ]
    } );
} );
        </script>

    <table id="cdcTracking-list" class="display">
        <thead>
            <tr>
                <th>No. </th>
                <th>Vessel </th>
                <th>Voyage </th>
                <th>Chasis No</th>
                <th>Plate</th>
                <th>Booking Ref</th>
            </tr>
        </thead>
    </table>

$getSessionList = getVehicleTrkDetail();
if (count($getSessionList) > 0) {
    $data = array();
    for ($i = 0; $i < count($getSessionList); $i ++) {
        $getSessionListRecord = $getSessionList[$i];
        $data[$i] = array(
            vesselCode => $getSessionListRecord['vesselCode'],
            voyage => $getSessionListRecord['voyage'],
            chasisNo => $getSessionListRecord['chasisNo'],
            plateNo => $getSessionListRecord['plateNo'],
            bookingRef => $getSessionListRecord['bookingRef']
        );
    }
    $json = array(
        status => "success",
        elements => $data
    );
} else {
    $json = array(
        status => "failure"
    );
}
echo json_encode($json);

{"status":"success","elements":[
{"vesselCode":"CE",
"voyage":"V01",
"chasisNo":"PL82A53DR61302244 ",
"plateNo":null,
"bookingRef":"V007\/E\/-00006"},
{"vesselCode":"CE",
"voyage":"V01",
"chasisNo":"PL1C21LNR6B101100",
"plateNo":null,
"bookingRef":"V007\/E\/-00006"}

Please someone help me for my beginner experience.Thanks

So what happens? any errors in the Firebug Net panel?

markpsmith
– markpsmith

2014-11-17 16:48:38 +00:00
Commented Nov 17, 2014 at 16:48 — markpsmith
– markpsmith, Commented Nov 17, 2014 at 16:48

Tony A · Accepted Answer · 2014-11-17 19:47:30Z

2

I had a bit of trouble with this too when I was trying to put together my first ajax loaded table as well. You can serve the json up from either an array structure or a class structure, my approach uses a stdClass.

The javascript:
To set the values from your json, you have to reference the 'data' field. You can also set column classes and whatever else from here if you plan to use any styling

<script language="javascript">
$(document).ready(function() {
    $('#cdcTracking-list').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../cdc/load/jsonTrack.php",
        "columns": [
            { "data": "number" },
            { "data": "vesselCode" },
            { "data": "voyage" },
            { "data": "chasisNo" },
            { "data": "plateNo" },
            { "data": "bookingRef" }
        ]
    } );
} );
</script>

The php:
The table also expects the data that you're serving up to be in an array with a 'data' key or a class with a 'data' property. So wherever you see 'stdClass' just substitute with array if you're so inclined.

<?php
$getSessionList = getVehicleTrkDetail();
//As I stated before, I used a class for my data.  
//You can also use an array but it still needs a 'data' field
$tableData = new stdClass();
$tableData->data = array();

if (count($getSessionList) > 0) {

    for ($i = 0; $i < count($getSessionList); $i ++) {
        $getSessionListRecord = $getSessionList[$i];

        $data = new stdClass(); //Changed to class here
        $data->number       = $i;
        $data->vesselCode   = $getSessionListRecord['vesselCode'];
        $data->voyage       = $getSessionListRecord['voyage'];
        $data->chasisNo     = $getSessionListRecord['chasisNo'];
        $data->plateNo      = $getSessionListRecord['plateNo'];
        $data->bookingRef   = $getSessionListRecord['bookingRef'];

        array_push($tableData->data, $data);

        //Since you don't declare this in the javascript for the table,
        //you shouldn't have it served up.  
        //Otherwise you will get a DataTables error
        //$data->serviceTerm  = 'Service Term';
    }

    $tableData->status = "success";
} else {
    //Note: this will also cause an error because you're not serving up any 
    //      fields that the API is expecting.  You might want to at least have
    //      empty fields or default data so it displays something.
    $tableData->status = "failure";
}
echo json_encode($tableData);
?>

edited Nov 17, 2014 at 19:47

answered Nov 17, 2014 at 17:16

Tony A

713 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

art Over a year ago

thanks for your time.did I have to create new class or just use stdClass() ?

Tony A Over a year ago

You can just use stdClass. The only purpose of it is a generic container to pass back to the DataTables API. Oh, and I just realized that I forgot to push the record onto the tableData field heh. I'll fix that

art Over a year ago

emm.. seems like my table not show any output and datatables give a error about Invalid json response

art Over a year ago

something about $data = stdClass(); my code suddenly stuck there.

Tony A Over a year ago

Oh, derp. My bad, that needs to be $data = new stdClass();

|

Collectives™ on Stack Overflow

create datatables from json array

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related