Igorovics Igorovics - 6 days ago 5
jQuery Question

How to redraw Datatable after selecting another page in JQuery Datatable?

I have a DataTable which I fill with data from the server side. The table is being filled the right way. When I use pagination, the server side is called again and produces the JSON data for the next page. The data is right. But the table isn't refreshing. According to the Datatables documentation I know that I should use the

draw()
function somehow, but I don't know where to call it.

This is my html table:

<table id="table-esemenyLista" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Dátum</th>
<th>Esemény</th>
</tr>
</thead>
<tbody id="esemenyListBody" class="text-primary">
</tbody>
</table>


This is the Jquery-datatable code connected to it:

$( document ).ready(function() {
esemenyListaTable = $("#table-esemenyLista").DataTable({
"processing" : true,
"serverSide" : true,
"paging" : true,
"searching" : false,
"lengthChange" : false,
"drawCallback": function( settings ) {
console.log('redrawn');
},
"ajax" : contextPath + "/historyContent.do"
});
});


This is the JSON object I get from the server-sid for the first time (appears right):

{
"draw":1,
"recordsTotal":16,
"recordsFiltered":16,
"data":[
[
1,
"2016-07-23",
"text1"
],
[
12,
"2016-10-04",
"text2"
],
[
13,
"2016-10-04",
"text3"
],
[
16,
"2016-10-18",
"text4"
],
[
17,
"2016-11-05",
"text5"
],
[
18,
"2016-11-14",
"text6"
],
[
19,
"2016-11-15",
"text7"
],
[
20,
"2016-11-16",
"text8"
],
[
22,
"2016-11-16",
"text9"
],
[
23,
"2016-11-17",
"text10"
]
]
}


After turning to the second page, I get the following JSON object, which is which syntax is right, but doesn't appear:

{
"draw":1,
"recordsTotal":16,
"recordsFiltered":16,
"data":[
[
24,
"2016-11-17",
"text11"
],
[
25,
"2016-11-23",
"text12"
],
[
26,
"2016-11-23",
"text13"
],
[
27,
"2016-11-23",
"text16"
],
[
28,
"2016-11-24",
"text17"
],
[
29,
"2016-11-25",
"text18"
]
]
}


The
drawCallBack
function only writes the log the first time. How should I call the draw method? After I red some other questions related to mine here on StackOverflow, I know I should clear, and then redraw the table, but how? Could someone help me please?

Answer

You have to return the right draw index. So the second one has to be "draw":2. I don't know your serverside language, in PHP you can get the draw index with $_GET['draw']

Comments