插件描述：JqueryPagination是一個輕量級的jquery分頁插件。只需幾個簡單的配置就可以生成分頁控件。並且支持ajax獲取數據，自定義請求參數，提供多種方法，事件和回調函數，功能全面的分頁插件。
jQuery Pagination分頁插件：下載：http://www.jq22.com/jquery-info5697
步驟一：導入相關的jquery和pagination文件
<script src="js/jquery-1.11.3.js"></script>
<!--分頁-->
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="js/jquery.pagination.js"></script>
步驟二：HTML代碼：
非常簡單只需要一個div標簽
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
步驟三： JS代碼：
$('.Pagination').pagination(pageNum, { num_edge_entries: 1, //邊緣頁數 num_display_entries: 4, //主體頁數 items_per_page: 1, //每頁顯示1項 prev_text: "上一頁", next_text: "下一頁", }); 完整代碼實例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<!--分頁-->
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<style> .setPageDiv { width: 1100px; margin: auto; margin-bottom: 91px; margin-top: 37px; } #pagination { margin: auto; margin-left: 100px; } .img-responsive { width: 30px; height: 30px; } </style>
</head>
<body>
<div class="zxdong">
<div class="zxdong_inner">
<ul style="margin-left: 100px;">
<!--<div class='row'> <div class='col-md-1 col-xs-1'> <img src='" + img + "'/ class='img-responsive'> </div> <div class='col-md-3 col-xs-3'> <p>11111111111111111 </p> </div></div>-->
<div class="list">
</div>
</ul>
</div>
</div>
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
</body>
<script> //分頁 $(function() { $('.setPageDiv').change(function() { getMsg(parseInt($(this).val())) }) function getMsg(num) { $.ajax({ url: 'data/bussiness.json', type: 'GET', dataType: 'json', success: function(data) { //1.計算分頁數量 var showNum = num; var dataL = data.list.length; var pageNum = Math.ceil(dataL / showNum); $('.Pagination').pagination(pageNum, { num_edge_entries: 1, //邊緣頁數 num_display_entries: 4, //主體頁數 items_per_page: 1, //每頁顯示1項 prev_text: "上一頁", next_text: "下一頁", callback: function(index) { //console.log(index); var html = '<ul>' console.log(showNum * index + '~' + parseInt(showNum * index) + parseInt(showNum)) for(var i = showNum * index; i < showNum * index + showNum; i++) { //console.log(i) if(i < dataL) { var img = data.list[i].img; var manager = data.list[i].manager; //交易類型 html += "<div class='row'>"; html += "<div class='col-md-1 col-xs-1'>" html += "<img src='" + img + "'/ class='img-responsive'>" html += "</div>" html += "<div class='col-md-3 col-xs-3'>" html += "<p>" + manager + "</p>" html += "</div></div>"; } } html += '</ul>'; $('.list').html(html) } }) } }) } getMsg(6) }) </script>
</html>
數據格式:bussiness.json
{
"list": [
{
"img":"img/dingwei.png",
"manager": "新店開業刷刷送豪禮"
}, {
"img": "img/dingwei.png",
"manager": "文史樓108"
},
{
"img": "img/dingwei.png",
"manager": "文史樓108"
},
{
"img": "img/dingwei.png",
"manager": "文史樓108"
},
{
"img": "img/dingwei.png",
"manager": "文史樓108"
}
]
}
文末福利：
福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程
領取方式：
如果需要學習視頻，歡迎關注 【編程微刊】微信公眾號，回復【領取資源】一鍵領取以下所有干貨資源，獲取更多有用技術干貨、文檔資料。所有文檔會持續更新，歡迎關注一起成長！
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
自薦前端干貨：
進階攻略|前端最全的框架總結：https://www.jianshu.com/p/2a8ce7075d79
web開發快速提高工作效率的一些資源：https://www.jianshu.com/p/3cede64e87e5
前端學習的幾個網站：https://www.jianshu.com/p/c36463dd56db
老司機程序員用到的各種網站整理：https://www.jianshu.com/p/c806eabe5bec
進階攻略|前端完整的學習路線：https://www.jianshu.com/p/ed50ee3889d4
八款前端開發人員更輕松的實用在線工具：https://www.jianshu.com/p/267a01fb8bdb
前端幾個常用簡單的開發手冊拿走不謝：https://www.jianshu.com/p/fd9689046a9b
程序員常用的六大技術博客類：https://www.jianshu.com/p/d1614f890282
九款優秀的企業項目協作工具推薦：https://www.jianshu.com/p/7df25e438610
移動端手勢的七個事件庫：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相關優質項目學習清單：https://www.jianshu.com/p/80d229e7fedc
2018前端越來越流行的的技術：https://www.jianshu.com/p/d4af2aa96cee