Javascript/jquery 将分页添加到通过 jquery 附加添加的 td

Question

我有一个表格，该表格在加载页面时隐藏，并且其中没有数据。用户单击按钮后，表格将被填充并最终显示。像这样:

tr = $('<tr/>');
tr.append("<td>somedata here</td>");
$('#mytable').append(tr);
 $('#mytable').show();

这是表格:

<table id="mytable" class="table table-striped table-bordered" style="display:none">
        <thead>
        <tr>
            <th>Data below</th>
        </tr>
        </thead>

        <tbody>
        </tbody>
    </table>

我的问题是我已经尝试了很多插件，包括数据表，但它们都不起作用。我需要找到一种让插件工作的方法，或者找到一种适合我填充表格的方式的分页方法。

我该怎么做？

Answer 1

您可以使用数据表。它将自动处理分页

这是工作演示:

$(document).ready(function() {
  $('#example').DataTable();
  var dataTable = $("#example").dataTable().api();
  $("#addRow").click(function() {
    tr = document.createElement("tr");
    tr.innerHTML = "<tr><td>New row </td><td>Test</td><td>45</td></tr>";
    dataTable.row.add(tr);
    dataTable.draw();
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Age</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Age</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>System Architect</td>
      <td>61</td>
    </tr>
    <tr>
      <td>John deo</td>
      <td>System Architect</td>
      <td>61</td>
    </tr>
    <tr>
      <td>Jane Deo</td>
      <td>System Architect</td>
      <td>61</td>
    </tr>
  </tbody>
</table>
<button id="addRow">Add Row</button>