欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery datatable實現分頁

傅智翔2年前8瀏覽0評論

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實現分頁的配置,可在頁面中展示數據表格,通過點擊分頁按鈕,實現數據的分頁展示。