很多前端工程師都做過分頁顯示，如果不使用插件，往往需要手寫動态生成的頁碼以及對頁碼進行操作的js。而做分頁的時候我們一般都會使用ajax請求資料生成頁碼。如果這樣寫下來，可能需要寫很長的代碼，并且發費大量時間，可能還有莫名其妙的bug。是以，jquery.pager.js就為我們解決了這一問題，我們隻需要簡單的幾句代碼，就能實作完美的分頁顯示了。
參考網址：https://github.com/jonpauldavies/jquery-pager-plugin
從以上網址下載下傳使用
一：引入jquery-pager.js
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="../jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
自帶的樣式很醜，是以建議同學們根據自己的需要改pager的樣式。
二：基礎使用
jquery.pager.js已經将方法封裝好了，我們隻需要調用pager()函數，并傳入相應的參數即可，下面是官方的簡單demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.pager.js Test</title>
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="../jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#pager").pager({ pagenumber: , pagecount: , buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: , buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>
</head>
<body>
<h1 id="result">Click the pager below.</h1>
<div id="pager" ></div>
</body>
</html>
展現效果：
pager的參數：
- pagenumber：目前頁碼
- pagecount：頁碼總數
- buttonClickCallback：回調函數
以上便是pager的基本樣式，我們可以更改pager的樣式和文字，改樣式我們隻需要添加或者覆寫其原有樣式就行，而改文字，則需要我們去jquery.pager.js檔案裡改，比如更改first為第一頁：
三：與ajax結合使用
上面隻是基本的使用方法，真正在項目中，我們會經常配合ajax使用，下面是我做的一個兩者結合的項目
項目展示：
經過我修改樣式的pager是不是看起來已經很不錯了呢，但實際上，他在ajax裡的表現才是我們選擇它的真正理由。
下面是我用node寫的測試接口：
router.get('/userList',function (req,res,next) {
var index=parseInt(req.query.index); //頁碼
var size=parseInt(req.query.size); //每頁多少條資料
var type=req.query.type;
var value=req.query.value;
var s=mainUser.user.filter(function (item) {
var reg=new RegExp('.*'+value+'.*','i');
var a=reg.test(item.ID)||reg.test(item.level)||reg.test(item.name)||reg.test(item.phone)||reg.test(item.number)||reg.test(item.date);
var b=true;
if(type){
b=item.level==type;
}
return a&&b;
});
count=Math.ceil(s.length/size); //頁碼總數
pageData=s.slice((index-)*size,index*size); //目前頁的資料
res.contentType('application/json');
res.send({data:pageData,count:count});
res.end();
});
由于我還做了篩選，是以有些代碼可能會影響了解，分頁一般都是在背景進行分頁，前端傳給背景頁碼index和一頁顯示的資料量size,背景計算出頁碼總數count和目前頁資料pageData,然後發送給前端。
而在前端我們的代碼是：
function getData(index) {
var text=$('.user-lev').text().replace(/\s/gm,'');
type=text=='全部'?'':text;
var value=$('#search-box').val();
$.ajax({
url: "/userList",
datatType: "json",
data: {"size": size, "index": index, "type": type,"value":value},
type: "GET",
success: function (data) {
$('.user-list .ul-list').html('');
$('.user-list .ul-list').append(template('temp', data));
$('#pager').pager({pagenumber: index, pagecount: data.count, buttonClickCallback: getData})
}
})
}
我們可以發現，我們隻用了一句代碼便實作了整個分頁顯示的js，結合我寫的JS模闆引擎-騰訊artTemplate的使用
http://blog.csdn.net/qq_33401924/article/details/53259631
我們在ajax裡使用了兩句代碼，便實作了頁面的顯示和分頁，是不是超級簡單，好用？