Getting datatables content via ajax

Question

Currently I'm generating basic table with PHP

        <table id="list" class="display">   
            <thead>
                <tr id="hdr">
                    <th><input type="checkbox" id="check_all"/>  ID</th>
                    <th>Ref. No</th>
                    <th>Color</th>
                    <th>Size</th>
                    <th>Quantity</th>
                    <th>Stack NO</th>
                    <th>Price</th> 
                    <th>Add Date</th>

                </tr>
            </thead>
            <tbody>
                <?php
                $result = $db->query("SELECT * FROM  `items` ORDER BY id DESC");
                if ($result->num_rows > 0) {

                    while ($row = $result->fetch_object()) {
                        echo '<tr url="?page=item&id=' . $row->id . '">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="' . $row->id . '" class="checkbox"/>    ' . $row->id . '</td>
<td> ' . $row->refno . '</td>
<td style="text-align:center">' . $row->color . '</td>
<td style="text-align:center">' . $row->size . '</td>
<td style="text-align:center" id="qt">' . trim($row->qt) . '</td>
<td style="text-align:center">' . $row->stackno . '</td>
<td style="text-align:center">' . $row->price . '</td>
<td>' . date('d.m.Y', strtotime($row->add_date)) . '</td>
</tr>';
                    }
                }
                ?>
            </tbody>
        </table>

Then applying datatables into this like that

 oTable= $('#list').dataTable( {       
        "bJQueryUI": true, 
        "iDisplayLength": 25,
        "aaSorting": [],
        "aoColumns": [ 
        {
            "bSortable": false
        },
        null, null, null,null,null, null, null
        ]    
    } ).columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [    null, null, null,null,null, null, null,
        {
            type: "date-range"
        }
        ]

    });

There is very big problem:

Currently my table has about 2000 rows. It takes very long to generate and load whole table. (At first it generates then applieas datatables) How can I modify this script to get contents via ajax page-by-page?

charlietfl · Accepted Answer · 2012-03-04 01:18:45Z

1

There are fully documented methods and examples in datatables API for using json data for dynamic tables using either local or server source

Even the download package includes these examples

edited Mar 4, 2012 at 1:18

answered Mar 4, 2012 at 1:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Greg Pettit Over a year ago

Agreed; all the examples are there. My first project with DataTables used server-side and I never thought of it as hidden; I looked for it and it was right there: datatables.net/usage/server-side

Josh · Accepted Answer · 2012-03-04 01:31:11Z

0

It would seem you need to take advantage of Pagination. A quick peak at the documentation for dataTables shows that it provides inherit support for this.

There's a fully functional example that shows you exactly how they acheived pagination and can be found here.

Good luck.

edited Mar 4, 2012 at 1:31

Josh

8,2195 gold badges45 silver badges41 bronze badges

answered Mar 4, 2012 at 1:14

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

1 Comment

Greg Pettit Over a year ago

It's not just pagination, it's the whole server-side functionality. Getting hung up in the details of pagination itself would be to miss out on everything else that's needed for server-side processing.

Collectives™ on Stack Overflow

Getting datatables content via ajax

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related