CODEWITHSUNDEEP
phpajaxjquerydatatable
heron
heron

Reputation: 3661

Getting datatables content via ajax

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?

Upvotes: 1

Views: 706

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50787

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.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 1

Related Questions