【www.bbyears.com--jquery】
先看效果
大致思路就是，把所有返回的数据，放到一个array中，通过给每个页码绑定click，然后无刷新显示下。
代码如下/**
* Created by chenqing on 14-3-31.
*/
;(function ($) {
$.fn.pages = function (options) {
var defualts = {
numPerPage:5,
pageTarget:"#result-list",
splitTag:"div",
pageClass:"paginations"
};
var opts = $.extend({}, defualts, options),
obj = $(this),
totalTarget = $(opts.pageTarget+">"+opts.splitTag),
totalNum = totalTarget.size(),
totalItems = [];
totalTarget.each(function(index){
totalItems.push($(this).html());
});
//要把之前的内容置空
$(opts.pageTarget+">"+opts.splitTag).html(" ");
var showItems = function(start,end,target){
var items = target.slice(start,end),
html = "";
for(var i = 0 ; i < items.length; i += 1 ){
html += items[i];
}
$(opts.pageTarget).html(html);
$(opts.pageTarget).removeClass("hide").fadeIn("slow");
};
var showPageNations = function(obj,num){
var pages = Math.ceil(totalNum / opts.numPerPage),
html = "
- ",
num = parseInt(num,10);
if(pages >10){
if( (num -1) <=0){
num = 1;
}
if(num > pages){
num = pages;
}
//首页
html += " 首页 ";
//上一页
if(num >= 2){
html += " 上一页 ";
}else{
html += " 上一页 ";
}
if( num + 10 <= pages){
for(var i = num ; i < num +10 ; i += 1){
html += ""+i+"";
}
}else{
for(var i = num - 10 ; i < num ; i += 1){
html += ""+i+"";
}
}
//下一页
if(num + 1 > pages){
html += " 下一页 ";
}else{
html += " 下一页 ";
}
//末页
html += " 末页 ";
html += ""+num+"/"+ pages+"";
}else{
if( (num -1) <=0){
num = 1;
}
if(num > pages){
num = pages;
}
//首页
html += " 首页 ";
//上一页
if(num >= 2){
html += " 上一页 ";
}else{
html += " 上一页 ";
}
for(var i = 1 ; i <= pages ; i += 1){
html += ""+i+"";
}
//下一页
if(num + 1 > pages){
html += " 下一页 ";
}else{
html += " 下一页 ";
}
//末页
html += " 末页 ";
html += ""+num+"/"+ pages+"";
}
obj.html(html);
}
if(totalNum > opts.numPerPage){
//先显示第一页
showItems(0,opts.numPerPage,totalItems);
//显示分页
showPageNations(obj,1);
//为上面的a添加click时间
$(obj).on("click","a",function(e){
e.preventDefault();
var num = $(this).attr("data-target"),
start = (num - 1) * opts.numPerPage,
end = num * opts.numPerPage;
if(num < 1){
num = 1 ;
}
if( start < 0 ){
//不能再往前翻页了，已经到第一页 了
start = 0;
}
if(end > totalNum){
//说明最后一样不够一页的
end = Math.abs(totalNum - end) + (num -1) * opts.numPerPage;
}
showItems(start,end,totalItems);
showPageNations(obj,num);
});
}else {
obj.html(" ")
showItems(0,totalNum,totalItems);
}
};
})(jQuery);
用法就是：
代码如下//分页开始鸟。。。
$(“#pages”).pages({numPerPage:10});