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”：true

2）添加了“bDestroy”：true

DataTable显示刷新后的所有记录

1 个答案: