简单Jquery分页插件(可根据需求做相应修改)

Jquery插件代码如下：

(function ($) {
$.fn.Pager = function (options) {
var opts = $.extend({}, $.fn.Pager.Defaults, options);
return this.each(function () {
var pageCount; //总页数
var recordCount = opts.recordcount; //共多少记录
var currentPage = options.pageindex; //当前页
if (opts.recordcount % opts.pagesize == 0) {
pageCount = opts.recordcount / opts.pagesize;
} else {
pageCount = Math.floor(opts.recordcount / opts.pagesize) + 1;
}
$(this).empty().append("<li>共" + pageCount + "页-当前第-" + currentPage + "-页-</li>");
if (pageCount >= 1) {
if (currentPage == 1) {
$(this).append(addButton("首页", currentPage, pageCount, opts.buttonClick, false));
}
else {
$(this).append(addButton("首页", currentPage, pageCount, opts.buttonClick, true));
}
}
if (currentPage >= 1) {
if (currentPage == 1) {
$(this).append(addButton("上一页", currentPage, pageCount, opts.buttonClick, false));
} else {
$(this).append(addButton("上一页", currentPage, pageCount, opts.buttonClick, true));
}
}
if (currentPage <= pageCount) {
if (currentPage == pageCount) {
$(this).append(addButton("下一页", currentPage, pageCount, opts.buttonClick, false));
} else {
$(this).append(addButton("下一页", currentPage, pageCount, opts.buttonClick, true));
}
}
if (pageCount >= 1) {
if (currentPage == pageCount) {
$(this).append(addButton("尾页", currentPage, pageCount, opts.buttonClick, false));
} else {
$(this).append(addButton("尾页", currentPage, pageCount, opts.buttonClick, true));
}
}
$("li", this).css("margin", "-2px").css("float", "left").css("padding", "0");
$("a", this).css("cursor", "pointer");
$(".flagfalse", this).css("text-decoration", "none").css("cursor", "default");
$(this).css("text-align", "center").css("float", "right");
});
}
function addButton(pagetype, currentPage, pageCount, buttonclick, flag) {//添加Button
var destpage = 1;
var $button;
if (flag == true) {
$button = $("<li><a href=\"#\">" + pagetype + "</a></li>");
} else {
$button = $("<li><a href=\"#\" class=\"flagfalse\">" + pagetype + "</a></li>");
}
switch (pagetype) {
case "首页":
destpage = 1;
break;
case "上一页":
if (currentPage != 1) {
destpage = currentPage - 1;
} else {
destpage = 1;
}
break;
case "下一页":
if (currentPage != pageCount) {
destpage = currentPage + 1;
} else {
destpage = pageCount;
}
break;
case "尾页":
destpage = pageCount;
break;
default:
destpage = 1;
break;
}
if (flag == true) {
$($button).click(function () { buttonclick(destpage); });
}
return $button;
}
$.fn.Pager.Defaults = {
recordcount: 1,
pageindex: 1,
pagesize: 10
};
})(jQuery)

 

使用方法：

1，在使用的页面中引入jqeury库文件

2，将以上jquery代码封装到js文件中，在使用分页插件的页面引入该js文件。需要在页面加入一个div标签(其他容器标签也可以)  id=pager

然后在前段页面(html,aspx,jsp)中加入下面jquery代码

var recordcount=100;//总记录数---来源后端服务器计算

var pageindex=1；//当前页---来源后端服务器配置

var pagesize=10;//每页显示数---来源后端服务器配置

$(function () {//初始化分页控件
$("#pager").Pager({ recordcount: recordcount, pageindex: pageindex, pagesize: pagesize, buttonClick: callJsonData });
});

//destpage参数---目标页   callJsonData是分页按钮触发的(方法)事件

function callJsonData(destpage) {//分页按钮事件
{

//写异步调用方法，获取目标页的数据

}