JQuery DataTable是一款Jquery插件,用于在實現數據表格的動態展示,是一款非常實用的數據展示工具。其功能強大,支持搜索,排序,分頁等操作,其中分頁操作是不可少的一部分。本文將介紹JQuery DataTable如何實現分頁的操作。
首先,在HTML中引用JQuery DataTable插件及其CSS和JavaScript文件:
<link rel="stylesheet" type="text/css" > <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
然后,在頁面中使用數據,將數據顯示在表格中:
<table id="example" class="display" style="width:100%"> <thead> <tr> <th>名稱</th> <th>數量</th> </tr> </thead> <tbody> <tr> <td>蘋果</td> <td>50</td> </tr> <tr> <td>橘子</td> <td>30</td> </tr> <tr> <td>香蕉</td> <td>20</td> </tr> <tr> <td>草莓</td> <td>40</td> </tr> </tbody> </table>
接著,在JavaScript中初始化JQuery DataTable插件,設置分頁屬性等:
$(document).ready(function() { $('#example').DataTable({ "paging": true, "lengthChange": false, "searching": false, "ordering": true, "info": false, "autoWidth": true }); });
其中,"paging": true,表示啟用分頁;"lengthChange": false,表示不允許用戶選擇分頁數量;"searching": false,表示不允許搜索;"ordering": true,表示允許表格排序;"info": false,表示不展示表格信息;"autoWidth": true,表示自適應表格寬度。
最終,完成了JQuery DataTable實現分頁的配置,可在頁面中展示數據表格,通過點擊分頁按鈕,實現數據的分頁展示。