I want to search in my database and show the results in a datatable. But i have some problems. After the first search, I have to delete the previous rows to show the new results. To remove all rows I am using fnClearTable() but
- it changes the style of the table.
- the footer of the table always shows the quantity is 0 when it is not. It lists the expected result.
- because the "quantity is 0", the previous and next buttons are disabled, it is not possible to sort by columns neither use the search filter.
- the internalization does not work.
If I comment the line $('#displayData').dataTable().fnClearTable(); all these problems disappear but the new rows of the search are added to the current table's data source.
There are my html / javascript codes respectively:
Thanks in advance!
- it changes the style of the table.
- the footer of the table always shows the quantity is 0 when it is not. It lists the expected result.
- because the "quantity is 0", the previous and next buttons are disabled, it is not possible to sort by columns neither use the search filter.
- the internalization does not work.
If I comment the line $('#displayData').dataTable().fnClearTable(); all these problems disappear but the new rows of the search are added to the current table's data source.
There are my html / javascript codes respectively:
$.ajax({ // search button click url: '../xxx/search.php', type: 'POST', data: 'idxxx=1', dataType: 'json', success: function(response) { var thtml = ""; $('#displayData').dataTable().fnClearTable(); if(response.length > 0) { $.each(response, function(index, record) { thtml += "<tr>"; thtml += "<td>" + record.Name + "</td>" ; thtml += "<td>" + record.BDay + "</td>"; thtml += "<td>" + record.Code + "</td>"; thtml += "</tr>"; }); } $('#displayData tbody').append(thtml); $('#resultContainer').css({"visibility":"visible"}); $('#displayData').dataTable({ "bRetrieve": true, "oLanguage": { "sUrl": "../xxx/DataTables-1.9.4/pt.txt" }, "sPaginationType" : "full_numbers" }); } });
<table class="display" id="displayData"> <thead> <tr> <th>Name</th> <th>Birthday</th> <th>Code</th> </tr> </thead> <tbody> </tbody> </table>
Thanks in advance!