jQuery Datatable sort issue

Question

I am using the Datatable plugin

http://www.datatables.net/examples/basic_init/zero_configuration.html

to populate the table I use jquery .html() function and pass the table content to it .

the problem is after the data is appended to the table all the sort , paginate and search functions are not working anymore , each change on these removes the data from the table .

can anyone help me with this problem please ?

thank you

Answer 1

You can use an alternate method to add the data to the table using the row.add functionality of the Datatable. Here's the code:

JQuery

$(document).ready(function() {
    var t = $('#example').DataTable();

    $('#addRow').on( 'click', function () {
        t.row.add( ['a','b','c','d','e'] ).draw();
    } );
} );

HTML

<button id="addRow">Add</button>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
</table>

You can keep the visibility of the table hidden during the start and once the data is populated, show the table.

JSFiddle: http://jsfiddle.net/ntgm9rde/1/