數據表中顯示的所有記錄刷新

Question

後，我有一個HTML表，我就document.ready繪製這樣的功能：

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

所有它的罰款，但問題是，當頁面加載我的數據表只顯示10條記錄，這就是我想要的，但是當我做了一些刷新表的操作（更新，刪除或者再次調用Draw_Function）表就沒問題，但是現在向我顯示了所有記錄，可能是什麼問題，我該如何解決它？我不知道可能是什麼，我試圖在重新初始化之前破壞表格，但不起作用。

Here is my working code example

但是我要添加一個片段。

$(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 1

我修改了代碼如下，它似乎是工作按您的要求。

$('#Table1').dataTable({ 

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

1）刪除了 「bRetrieve」：真

2）增加了 「bDestroy」：真