Jquery DataTable 是一款非常好用的表格插件,對(duì)于需要展示大量數(shù)據(jù)的網(wǎng)站來(lái)說(shuō)是必備的。在使用該插件時(shí),設(shè)置好分頁(yè)功能是非常重要的。接下來(lái),我們將介紹如何設(shè)置DataTable的分頁(yè)功能。
首先,我們需要在html中引入jQuery和DataTable的js和css文件:
<link rel="stylesheet" type="text/css" /> <script src="https://cdn.datatables.net/v/dt/jq-3.6.0/datatables.min.js"></script>
接著,我們創(chuàng)建一個(gè)表格,并指定一個(gè)id,用于后續(xù)的初始化:
<table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小明</td> <td>18</td> <td>男</td> <td>北京</td> </tr> <tr> <td>2</td> <td>小紅</td> <td>19</td> <td>女</td> <td>上海</td> </tr> <tr> <td>3</td> <td>小華</td> <td>20</td> <td>男</td> <td>廣州</td> </tr> <tr> <td>4</td> <td>小李</td> <td>21</td> <td>男</td> <td>深圳</td> </tr> </tbody> </table>
在完成了上述準(zhǔn)備工作之后,我們需要通過(guò)Javascript代碼來(lái)初始化DataTable。設(shè)置分頁(yè)功能只需要指定table的paging屬性為true即可:
<script> $(document).ready(function() { $('#myTable').DataTable({ paging: true }); }); </script>
通過(guò)上述代碼,我們就可以實(shí)現(xiàn)DataTable的分頁(yè)功能了。同時(shí),DataTable還提供了很多其他的功能,例如:搜索、排序、出現(xiàn)動(dòng)畫效果等等。想要了解更多內(nèi)容,可以查看官方文檔。