Question

我有以下的html标签。我将在页面中有n个按钮和相应的表格。该页面是动态的，数据可能会随着它从中提供数据的相应后端而增加或减少。我想实现分页，每页只显示2个按钮和表格。如果用户想看到他们必须使用分页来查看剩余数据。

    <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">Source_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>111</th>
             </tr>
             <tr>
             <td>111</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">Source_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>222</th>
             </tr>
             <tr>
             <td>222</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">Source_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>333</th>
             </tr>
             <tr>
             <td>333</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

有人可以帮助我实现分页，每页只显示2 <div>buttons</div>。

Answer 1

如果你问如何尝试这个网站 http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery 有一些信息，但如果你制作一个教程....好吧你没有错误

Answer 2

您可以使用Jquery数据表，它非常简单易用，具有PAGINATION，SORT，SEARCH功能。

<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

$(document).ready(function(){
    $('.data_table').DataTable();
});

与上面的示例一样，您可以创建具有不同类名或Id的多个数据表。

如何使用jquery在html中创建分页

2 个答案: