jQuery jPages是一個非常實用的jQuery分頁插件,它可以幫助我們快速的實現數據異步分頁功能。
在使用jPages之前,我們需要引入jQuery庫和jPages插件,如下所示:
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jPages/0.7.1/jpages.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/jPages/0.7.1/jPages.min.css" rel="stylesheet">
引入插件之后,我們就可以開始使用jPages了。首先,我們需要準備好要分頁的數據:
var data = [ {name: "張三", age: 18, gender: "男"}, {name: "李四", age: 20, gender: "女"}, {name: "王五", age: 22, gender: "男"}, {name: "趙六", age: 24, gender: "女"}, {name: "錢七", age: 26, gender: "男"}, {name: "孫八", age: 28, gender: "女"} ];
接著,我們需要在頁面中準備一個容器,用于顯示分頁數據:
<div id="jpage"></div>
最后,我們可以使用jPages的API來進行異步分頁操作:
$('#jpage').jPages({ containerID: 'jpage', previous: '上一頁', next: '下一頁', perPage: 2, delay: 20, callback: function (pages, items) { var dataHtml = ''; for (var i = (pages.current-1)*pages.perPage; i< pages.current*pages.perPage; i++) { if (data[i]) { dataHtml += '<li>' + data[i].name + ' ' + data[i].age + '歲 ' + data[i].gender + '</li>'; } } $('#jpage').find('.data').html(dataHtml); } });
以上代碼的含義是:在id為jpage的容器里顯示數據,每頁顯示2條數據,延遲加載20毫秒,回調函數用于生成分頁數據。
總之,使用jQuery jPages可以非常方便地實現異步分頁,大大提高了我們的開發效率。