如何在动态html表中实现分页

时间:2019-10-18 06:04:19

标签: javascript html html-table pagination

我有一个通过JSON数据动态填充的html表。我必须对该表实施分页,以便每页仅显示10条记录。

我尝试了Datatable.js和smpSortaableTable.js,它们显示了上一个和下一个按钮的选项,但所有记录仅显示在首页上。

图书馆:

MyViewController

表设计为:

<link rel="stylesheet" href="smpSortableTable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="smpSortableTable.js"></script>

JavaScript代码:

<div class="card-body">
  <table class="table table-bordered table-hover order-list table-responsive-sm table-responsive-md table-striped" style="font-size:small;" id="Open_table">
    <thead class="thead-dark">
      <tr>
        <th>TAF-No</th>
           <th>Purpose</th> 
        <th>Travel Location</th>
        <th>No of Days</th>
           <th>Advance</th>
           <th>Remarks</th>
           <th></th>
      </tr>
    </thead>
    <tbody>  
    </tbody>
  </table>
                 </div>

预期结果是页码以及底部的上一个和下一个按钮。请指导并提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

在文件中包含Datatable.js之后。您需要在No函数中将该DataTable应用于表。尝试这个.. ready()