jQuery DataTables load large data

Question

How to load large data on databases into jquery datatables?

        $(document).ready(function(){
            $('#datatables').dataTable({
                "sPaginationType":"full_numbers",
                 "aaSorting": [[0, 'asc'], [1, 'desc']],
                 "sScrollY": "200px",
                "bJQueryUI":true
            });
        })

total data on xnod_kode table > 10000 records ???

                <?php

                $result = mysql_query("SELECT * FROM xnod_kode limit 10");
                $no = 1;
                while ($row = mysql_fetch_array($result)) {
                    ?>
                    <tr>
                        <td><?php echo $no; ?></td>
                        <td><?php echo $row['kodepos']?></td>
                        <td><?php echo $row['kelurahan']?></td>
                        <td><?php echo $row['kecamatan']?></td>
                    </tr>
                    <?php
                    $no++;
                }
                ?>

score 2 · Answer 1 · answered Sep 03 '13 at 22:43

In general, DataTables handles very large amounts of data best by paginating and fetching data via AJAX: http://datatables.net/examples/data_sources.

If your data varies, and >100,000 records is more of an outlier condition, you may consider using the DataTables scroller plugin: http://datatables.net/extras/scroller/. This creates a far superior user experience and can handle tens of thousands of rows under the right conditions. For optimal performance you'd probably want to remove your default sort from the script and place it in your PHP.

score 1 · Answer 2 · answered Feb 27 '14 at 05:25

Here is javascript code under ready function

$('#myDatatable').dataTable({
    sAjaxSource : 'jsonfiledemo.txt'
});

Here is html table

<table id="myDatatable">
<thead>
    <tr>
        <th>data heading 1</th>
        <th>data heading 2</th>
        <th>data heading 3</th>
    </tr>
</thead>
<tbody>
</tbody>

jsonfiledemo.txt jsone file

    {
        "sEcho": 0,
        "iTotalRecords": "34635",
        "iTotalDisplayRecords": "34635",
        "aaData": [
            [
                "title1",
                "another handling...",
                "Authored"                
            ],
           [
                "new title",
                "Cookies are used to track valid session on internet websites. another...",
                "Authored",
                "-"
           ]
    ]
}

score 0 · Answer 3 · answered Oct 09 '13 at 16:28

0

Best way is using ajax to load data.

load data piece by piece

answered Oct 09 '13 at 16:28

Mohsen Alizadeh

1,595
12
25

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

One way is to Convert php array to JSON of all records and give it to JS array. Then parse JSON and render it as table.

But the best way is to load some limit of data on page load. and do paging(Using AJAX) either with page number links or on scroll of end of the table.

edited May 23 '17 at 11:51

Community

1
1

answered Feb 27 '14 at 05:36

Jaykishan

1,409
1
15
26

jQuery DataTables load large data

4 Answers4