一般使用方法
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="res/bootstrap.min.css"/></head><body style="padding:100px"> ???<ul class="pagination" id="pagination"></ul><script src="res/jquery-1.7.2.min.js"></script><script src="res/jqPaginator.min.js"></script><script>$("#pagination").jqPaginator({ ???totalPages:20, ?????//总页数 ???visiblePages: 5, ???//显示多少页码 ???currentPage: 1 ?????//当前页码})</script></body></html>效果图：
如果想换样式和文字，可以修改jqPaginator.min.js
first: ‘<li class="first"><a href="javascript:;">First</a></li>‘,prev: ‘<li class="prev"><a href="javascript:;">Previous</a></li>‘,next: ‘<li class="next"><a href="javascript:;">Next</a></li>‘,last: ‘<li class="last"><a href="javascript:;">Last</a></li>‘,
比如修改为
first: ‘<li class="first"><a href="javascript:;">首页</a></li>‘,prev: ‘<li class="prev"><a href="javascript:;"><<</a></li>‘,next: ‘<li class="next"><a href="javascript:;">>></a></li>‘,last: ‘<li class="last"><a href="javascript:;">末页</a></li>‘,
修改后效果图
Ajax请求
$("#pagination").jqPaginator({ ???totalPages:20, ?????//总页数 ???visiblePages: 5, ???//显示多少页码 ???currentPage: 1, ????//当前页码 ???onPageChange: function (num, type) { ???????//num为当前点击的页码 ????????if (type == "change") { ???????????$.ajax(……) ???????} ???}})type一直为”change“ 不知道为啥要这个参数。。。。。。
Form表单提交
在form中添加隐藏元素page，pageChange时page赋值为点击的页码数然后提交表单，这时页面刷新page出现在url中，为了同步操作，需要获取url中page的值，这里用的是GetQueryString函数 ，获取到page值然后赋值给隐藏元素page，设置currentPage为$("#page").val()
这里有一个问题，就是currentPage不能直接赋值为GetQueryString("page")，这个应该和代码的执行顺序有关系。。。。
下面贴出完整代码：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="res/bootstrap.min.css"/></head><body style="padding:100px"><form id="form"> ???<input type="hidden" name="page" id="page"/></form> ???<ul class="pagination" id="pagination"></ul><script src="res/jquery-1.7.2.min.js"></script><script src="res/jqPaginator.min.js"></script><script> ???$("#page").val(GetQueryString("page")||1); ???function GetQueryString(name) { ???????var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); ???????var r = window.location.search.substr(1).match(reg); ???????if(r!=null){ ???????????var b = decodeURI(r[2]).replace(/\+/g," ").replace(/%2B/g,"+").replace(/%22/g,‘"‘).replace(/%27/g,"‘").replace(/%2F/g,"/").replace(/%23/g,"#").replace(/%3D/g,"=").replace(/%26/g,"&").replace(/%40/g,"@").replace(/%3B/g,"；").replace(/%3F/g,"?").replace(/%2C/g,",").replace(/%24/g,"$"); ???????????return ?b; ???????} ???????return null; ???}$("#pagination").jqPaginator({ ???totalPages:20, ?????//总页数 ???visiblePages: 5, ???//显示多少页码 ???currentPage: parseInt($("#page").val()), ????//当前页码 ???onPageChange: function (num, type) { ???????if (type == "change") { ???????????$("#page").val(num); ???????????$("#form").submit(); ???????} ???}})</script></body></html>注：replace的目的是为了替换特殊字符，在form表单中有输入框的情况下可以用上
jqPaginator分页（ajax用法和form表单提交用法）
原文地址：http://www.cnblogs.com/AnnieShen/p/7570157.html