Miguel Flores Miguel Flores - 1 month ago 10
jQuery Question

DataTable showing all records after refresh

I have an HTML table which I draw on

document.ready
with a function like this:

Draw_Function()
var html += '<td>... and all my table structure'
$('#MyTableTbodyId').html(html);
$('#MyTableId').dataTable();


All it's fine, the problem is that when page load my data table only shows 10 records, that's what I want, but when I do something to refresh the table (update, delete, or just calling again Draw_Function) the table it's ok but now shows me all the records, what can be the problem and how can I try to solve it? I do not have any idea of what could be, I tried destroying the table before initialize it again but doesn't work.

Here is my working code example

However I'm going to add an snippet.



$(document).ready(function() {
$('#click').click(function() {
draw();
});

draw();
});

function draw() {
var lines = "";
lines += '<tr id="P001" data-id="001">';
lines += '<td>001</td>';
lines += '<td id="P001-1">B</td>';
lines += '<td><span class="btn btn-success btn-xs glyphicon glyphicon-edit" style="width:22px; height:22px;" data-id="001" data-toggle="modal" data-target="#myModal"></span></td>';
lines += '</tr>';
lines += '<tr id="P002" data-id="002">';
lines += '<td>002</td>';
lines += '<td id="P002-1">DD</td>';
lines += '<td><span class="btn btn-success btn-xs glyphicon glyphicon-edit" style="width:22px; height:22px;" data-id="002" data-toggle="modal" data-target="#myModal"></span></td>';
lines += '</tr>';
lines += '<tr id="P003" data-id="003">';
lines += '<td>003</td>';
lines += '<td id="P003-1">XFDS</td>';
lines += '<td><span class="btn btn-success btn-xs glyphicon glyphicon-edit" style="width:22px; height:22px;" data-id="003" data-toggle="modal" data-target="#myModal"></span></td>';
lines += '</tr>';

$('#T1Body').html(lines);
$('#Table1').dataTable({
"bRetrieve": true,
aLengthMenu: [
[1, 2, 50, 100, -1],
[1, 2, 50, 100, "All"]
],
iDisplayLength: 1
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" style="padding-top:40px;">
<div class="row">
<table class="table table-striped" id="Table1">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td><span class="glyphicon glyphicon-cog"></span></td>
</tr>
</thead>
<tbody id="T1Body">
</tbody>
</table>
</div>
<div class="row">
<button id="click">Reload</button>
</div>
</div>




Answer

I modified the code as below and it seems to be working as per your requirement.

$('#Table1').dataTable({

    aLengthMenu: [
      [1, 2, 50, 100, -1],
      [1, 2, 50, 100, "All"]
    ],
    "bDestroy": true,
    iDisplayLength: 1
  });

1) Removed "bRetrieve": true

2) Added "bDestroy": true