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>

我的问题是我尝试了很多插件，包括dataTables，他们只是不工作。我需要找到一种方法来使插件工作或找到一种分页方式，这种方式与我填充表格的方式一致。

我该怎么做？

Answer 1

You can use datatable. It will automatically handle pagination

Here is working demo :

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

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

1 个答案: