jqPaginator 基于jQuery的分页组件

我问问，如果我要多已经分页的数据在过滤，分页。如何初始化jqPaginator

好吧弄清楚了，原来我传totalPages的时候直接引用了json的原始数据，是个字符串，parseInt一下就好了

有ajax从服务器获取数据，分页的例子吗？

KeenWon，您好！

我之前使用过一个叫 kkpager 的分页组件，后来因为 kkpager 不能够支持一个页面中存在多个分页而放弃了。但是 kkpager 有一个不错的地方，就是除了支持 click 链接方式之外，也同时支持 <a>…</a> 链接方式（ PS：<a>…</a> 链接方式被叫做 link 模式 ）。

基于我的个人喜好，当一个页面只需要一个分页的时候，我还是比较喜欢使用 <a>…</a> 链接方式的。因此我稍微扩展了您的分页程序，让它能够也同时支持 <a>…</a> 链接方式。以下是我写的代码，仅供参考。不当之处，请多指教。

PS:代码没有整理过，可能有点乱 ^_^ 。 我的联系方式：2734830465@qq.com

修改说明：

/**
* 新增功能：允许<首页、上一页、下一页、最后一页>按钮为空。在 self.buildItem = function (type, pageData)……

* 在 $.jqPaginator.defaultOptions 中新增3个属性
model : ‘link’,//默认使用 link 模式
target : ‘_self’,//使用link模式时，<a>链接默认在<当前页> 跳转
getLink: null,//getLink是一个function()，目的是提供<a>链接中的 href 的值。也就是<a>链接需要跳转的 url 。下面的代码中，有一个默认的实现方法，会自动获取url

* 调整了 first、prev、next、last 4个属性的默认值，不再需要li标签和a标签了。同时允许这4个属性的值为空。当属性值为空的话，则该按钮被隐藏
first: ‘首页’,
prev: ‘上一页’,
next: ‘下一页’,
last: ‘末页’,

* 在 self.verify = function() 中新增一个对 model 进行验证的代码

* 在 self.render = function() 中调整了 self.bindEvents(); ，只有当 model == ‘click’ 时才会执行 self.bindEvents();

* self.renderHtml = function() 中增加了对 <上一页、下一页> 分页数的溢出处理（冗余代码，可用可不用）。
var _prev = self.options.currentPage <= 1 ? 1 : self.options.currentPage – 1;//上一页
var _next = self.options.currentPage >= self.options.totalPages ? self.options.totalPages : self.options.currentPage + 1;//下一页

********* 最主要的修改出现在 self.buildItem = function (type, pageData) 里面 *********

*/

jqPaginator.js
———————————————– 主题程序 jqPaginator.js begin ———————————————–

//主体程序
(function ($) {
‘use strict’;

$.jqPaginator = function (el, options) {
if(!(this instanceof $.jqPaginator)){
return new $.jqPaginator(el, options);
}
var self = this;

self.$container = $(el);
self.$container.data(‘jqPaginator’, self);
self.init = function()
{
if (options.first || options.prev || options.next || options.last || options.page)
{
options = $.extend({}, {
first: ”,
prev: ”,
next: ”,
last: ”,
page: ”
}, options);
}

self.options = $.extend({}, $.jqPaginator.defaultOptions, options);

self.verify();
self.extendJquery();
self.render();
self.fireEvent(this.options.currentPage, ‘init’);
};

self.verify = function()
{
var opts = self.options;

//Add — begin
if(opts.model != "link" && opts.model != "click")
{
throw new Error(‘[jqPaginator] type error: model’);
}
//Add — end

if (!self.isNumber(opts.totalPages)) {
throw new Error(‘[jqPaginator] type error: totalPages’);
}

if (!self.isNumber(opts.totalCounts)) {
throw new Error(‘[jqPaginator] type error: totalCounts’);
}

if (!self.isNumber(opts.pageSize)) {
throw new Error(‘[jqPaginator] type error: pageSize’);
}

if (!self.isNumber(opts.currentPage)) {
throw new Error(‘[jqPaginator] type error: currentPage’);
}

if (!self.isNumber(opts.visiblePages)) {
throw new Error(‘[jqPaginator] type error: visiblePages’);
}

if (!opts.totalPages && !opts.totalCounts) {
throw new Error(‘[jqPaginator] totalCounts or totalPages is required’);
}

if (!opts.totalPages && !opts.totalCounts) {
throw new Error(‘[jqPaginator] totalCounts or totalPages is required’);
}

if (!opts.totalPages && opts.totalCounts && !opts.pageSize) {
throw new Error(‘[jqPaginator] pageSize is required’);
}

if (opts.totalCounts && opts.pageSize) {
opts.totalPages = Math.ceil(opts.totalCounts / opts.pageSize);
}

if (opts.currentPage < 1 || opts.currentPage > opts.totalPages) {
throw new Error(‘[jqPaginator] currentPage is incorrect’);
}

if (opts.totalPages < 1) {
throw new Error(‘[jqPaginator] totalPages cannot be less currentPage’);
}
};

self.extendJquery = function()
{
$.fn.jqPaginatorHTML = function (s) {
return s ? this.before(s).remove() : $(‘<p>’).append(this.eq(0).clone()).html();
};
};

self.render = function()
{
self.renderHtml();
self.setStatus();
//Add
if(self.options.model == ‘click’)
{
self.bindEvents();
}
//self.bindEvents();
};

self.renderHtml = function()
{
var html = [];

var pages = self.getPages();
//分页处理
for (var i = 0, j = pages.length; i < j; i++)
{
html.push(self.buildItem(‘page’, pages ));
}

var _prev = self.options.currentPage <= 1 ? 1 : self.options.currentPage – 1;//上一页
var _next = self.options.currentPage >= self.options.totalPages ? self.options.totalPages : self.options.currentPage + 1;//下一页

self.isEnable(‘prev’) && html.unshift(self.buildItem(‘prev’, _prev));
self.isEnable(‘first’) && html.unshift(self.buildItem(‘first’, 1));
self.isEnable(‘statistics’) && html.unshift(self.buildItem(‘statistics’));
self.isEnable(‘next’) && html.push(self.buildItem(‘next’, _next));
self.isEnable(‘last’) && html.push(self.buildItem(‘last’, self.options.totalPages));

if (self.options.wrapper)
{
self.$container.html($(self.options.wrapper).html(html.join(”)).jqPaginatorHTML());
}
else
{
self.$container.html(html.join(”));
}
};

self.buildItem = function (type, pageData)
{
var currentPage = self.options.currentPage;//当前页页数

var _page = self.options[type];//首页、上一页、下一页、最后一页、分页
if(_page == "") //允许< 首页、上一页、下一页、最后一页 >按钮为空
{
return "";
}
//分页时直接使用分页页数
if(type == "page")
{
_page = pageData;
}
//href
var _link = "javascript:void(0);";
if(self.options.model == "link")//link模式
{
if(currentPage != pageData)//不是当前页
{
_link = self.options.getLink(pageData);//从getLink(n)中获取url
}

if(type != "page")
{
if(currentPage <= 1)//首页、第一页
{
if(type == "prev" || type == "first")//上一页和第一页不需要链接
{
_link = "javascript:void(0);";
}
}
if(currentPage >= self.options.visiblePages)//下一页、末页
{
if(type == "next" || type == "last")//上一页和第一页不需要链接
{
_link = "javascript:void(0);";
}
}
}
}

var _button = "<li class=’" + type + "’><a href=’" + _link + "’ target=’" + self.options.target + "’>" + _page + "</a></li>n";
var html = _button.replace(/{{totalPages}}/g, self.options.totalPages)
.replace(/{{totalCounts}}/g, self.options.totalCounts);

return $(html).attr({
‘jp-role’: type,
‘jp-data’: pageData
}).jqPaginatorHTML();
};

//判断首页、第一页、下一页、最后一页是否可以点击
self.setStatus = function()
{
var options = self.options;

if (!self.isEnable(‘first’) || options.currentPage === 1) {
$(‘[jp-role=first]‘, self.$container).addClass(options.disableClass);
}
if (!self.isEnable(‘prev’) || options.currentPage === 1) {
$(‘[jp-role=prev]‘, self.$container).addClass(options.disableClass);
}
if (!self.isEnable(‘next’) || options.currentPage >= options.totalPages) {
$(‘[jp-role=next]‘, self.$container).addClass(options.disableClass);
}
if (!self.isEnable(‘last’) || options.currentPage >= options.totalPages) {
$(‘[jp-role=last]‘, self.$container).addClass(options.disableClass);
}

$(‘[jp-role=page]‘, self.$container).removeClass(options.activeClass);
$(‘[jp-role=page][jp-data=' + options.currentPage + ']‘, self.$container).addClass(options.activeClass);
};

self.getPages = function()
{
var pages = [],
visiblePages = self.options.visiblePages,
currentPage = self.options.currentPage,
totalPages = self.options.totalPages;

if (visiblePages > totalPages) {
visiblePages = totalPages;
}

var half = Math.floor(visiblePages / 2);
var start = currentPage – half + 1 – visiblePages % 2;
var end = currentPage + half;

if (start < 1) {
start = 1;
end = visiblePages;
}
if (end > totalPages) {
end = totalPages;
start = 1 + totalPages – visiblePages;
}

var itPage = start;
while (itPage <= end) {
pages.push(itPage);
itPage++;
}

return pages;
};

self.isNumber = function(value)
{
var type = typeof value;
return type === ‘number’ || type === ‘undefined’;
};

self.isEnable = function (type) {
return self.options[type] && typeof self.options[type] === ‘string’;
};

self.switchPage = function(pageIndex)
{
self.options.currentPage = pageIndex;
self.render();
};

self.fireEvent = function (pageIndex, type) {
return (typeof self.options.onPageChange !== ‘function’) || (self.options.onPageChange(pageIndex, type) !== false);
};

self.callMethod = function (method, options) {
switch (method) {
case ‘option’:
self.options = $.extend({}, self.options, options);
self.verify();
self.render();
break;
case ‘destroy’:
self.$container.empty();
self.$container.removeData(‘jqPaginator’);
break;
default :
throw new Error(‘[jqPaginator] method "’ + method + ‘" does not exist’);
}

return self.$container;
};

self.bindEvents = function ()
{
var opts = self.options;
self.$container.off();
self.$container.on(‘click’, ‘[jp-role]‘, function()
{
var $el = $(this);
if ($el.hasClass(opts.disableClass) || $el.hasClass(opts.activeClass)) {
return;
}

var pageIndex = +$el.attr(‘jp-data’);
if (self.fireEvent(pageIndex, ‘change’)) {
self.switchPage(pageIndex);
}
});
};

self.init();

return self.$container;
};

$.jqPaginator.defaultOptions = {
model : ‘link’,//Add
target : ‘_self’,//Add
wrapper: ”,
first: ‘首页’,
prev: ‘上一页’,
next: ‘下一页’,
last: ‘末页’,
page: ‘{{page}}’,
totalPages: 0,
totalCounts: 0,
pageSize: 0,
currentPage: 1,
visiblePages: 7,
disableClass: ‘disabled’,
activeClass: ‘active’,
getLink: null,//Add
onPageChange: null
};

$.fn.jqPaginator = function()
{
var self = this, args = Array.prototype.slice.call(arguments);

if (typeof args[0] === ‘string’)
{
var $instance = $(self).data(‘jqPaginator’);
if (!$instance) {
throw new Error(‘[jqPaginator] the element is not instantiated’);
} else {
return $instance.callMethod(args[0], args );
}
}
else
{
return new $.jqPaginator(this, args[0]);
}
};

})(jQuery);

———————————————– 主题程序 jqPaginator.js end ———————————————–

———————————————- jqPaginator.js 的配套代码 begin ———————————————

//getLink() 方法的默认实现。主要功能是自动获取 url 并修改 page=xxx
//link模式使用 ： 从 url 中自动获取 page=xxx , 如果有需要，可以重写 getALink(n) 方法，其中 n 是目标页码
function getALink(n)
{
var url = window.location.search.substr(1);//url携带的所有参数
var page = "page="+n;
var param = "?"+url;
param = param.replace(/(?|&)page=[0-9]+/,"$1"+page);
if(param.indexOf("?") == -1)
{
param = "?" + param;
}
if(param.indexOf(page) == -1)
{
if(param != "?")
{
page = "&" + page;
}
param += page;
}
return param;
}

//click模式使用 ： 使用时需要重写 getAjax(n) 方法
/*
ajax分页时的配置（这个<span>…</span>主要是为了配合 pageOnLoad(pageId, pageNum) 方法）：
一、<span id="kknum" style="display:none;">10,105,1</span> <!– 如果使用click模式，则这里的参数必须3个：第三个参数是 1 ，则使用click模式，否则使用link模式 –>
二、使用 click 模式，必须重写下面的 getAjax(n) 方法，其中 n 是目标页码
*/
function getAjax(n)
{
$(‘#p1′).text("当前页：" + n);
}

//从url中获取某个参数值的正则。主要是给 getLink() 方法使用
function getParameter(url, name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = url.match(reg);
if (r != null)
{
var pageNo = unescape(r );
if(isNaN(pageNo))
{
pageNo = 1;
}
return parseInt(pageNo,10);
}
return 1;//找不到page，默认为第 1 页
}

//使用 jqPaginator.js 的的默认方法
function pageOnLoad(pageId, pageNum)
{
var url = window.location.search.substr(1);
var pageNo = getParameter(url, "page");//当前页的页数
var kknum = $("#" + pageNum).html();
var sp = kknum.split(",");
var totalPages = parseInt(sp[0],10);//总页数
var visiblePages = parseInt(sp ,10);//总记录数
var model = sp == ’1′ ? ‘click’ : ‘link’;//link / click 模式
//首页、上一页、下一页、末页 允许为空
$.jqPaginator(‘#’ + pageId, {
model : model,//link / click 模式
totalPages: totalPages,//总页数
visiblePages: visiblePages,//总记录数
currentPage: pageNo,//当前页的页数
//first:”, //首页按钮为空
//prev:”, //上一页按钮为空
//next:”, //下一页按钮为空
//last:”, //末页按钮为空
getLink : function(n)//link模式时有效，目的是获取翻页时使用的url
{
return getALink(n);
},
onPageChange: function(n, type)//click模式时有效
{
getAjax(n);
}
});

//第二个分页demo
/*
$.jqPaginator(‘#pagination2′, {
model : ‘click’,
totalPages: 3,
visiblePages: 10,
currentPage: 1,
getLink : function(num)
{
return "?page="+num;
},
onPageChange: function (num, type) {
$(‘#p2′).text(type + ‘：’ + num);
}
});
*/
}

———————————————- jqPaginator.js 的配套代码 end ———————————————

以上代码可以单独保存为一个js文件，使用时在页面中引入后，用 pageOnLoad(pageId, pageNum) 调用即可

由于 http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css 的文件太大（97K），我另外创建了 base.css 文件（仅2K），复制了其中所需用到的css基础样式 。 base.css 代码如下：

—————————————————— base.css begin —————————————————–

/*公用的style*/
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}

.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #428bca;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
cursor: default;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: #999;
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;
}

—————————————————— base.css end —————————————————–

另外我还复制了你页面上那个橙色样式按钮的css，保存为 orange.css 。以后如果需要其它颜色的样式，另外再创建一个css文件替代即可

PS:能不能帮忙修改一下，固定一下 分页<li> 的长度（<li>长度固定，并且能够自动延长）？

—————————————————– orange.css begin —————————————————-

/*自定义style*/
.orange .pagination>li>a{margin-right:5px;border-radius:3px;background:#fff;color:#333;border-color:#ccc;padding:6px 15px}
.orange .pagination>li>a:hover,.pagination>li>a:focus{color:#fff;background:#fb9400;border-color:#fb9400}
.orange .pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#000;background:#fff;border-color:#ccc}
.orange .pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>a:focus{color:#fff;background:#fb9400;border-color:#fb9400}
.orange .pagination .arrow2{margin:3px 8px 5px 0}
.orange .pagination a:hover .arrow2{border-right-color:#fff}
.orange .pagination .arrow3{margin:3px 0 5px 8px}
.orange .pagination a:hover .arrow3{border-left-color:#fff}

—————————————————– orange.css end —————————————————-

demo页面代码如下

—————————————————– demo.html begin —————————————————-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta charset="utf-8"/>
<link href="inc/jqPaginator/base.css" rel="stylesheet" type="text/css" /><!– 基础 样式(蓝色)，必须引用。引用时需要放在 orange.css 上面 –>
<link href="inc/jqPaginator/orange.css" rel="stylesheet" type="text/css" /><!– 使用 orange 样式 –>
<title>jqPaginator分页Demo</title>
</head>
<body style="padding:10px;">
<p id="p1"></p>
<div class="orange"><!– 使用 orange 样式 –>
<span id="kknum" style="display:none;">5,50</span> <!– 如果使用click模式，则这里的参数必须3个：第三个参数是 1 ，则使用click模式，否则使用link模式 –>
<ul class="pagination" id="kkpager"></ul>
</div>

<p id="p2"></p>
<!– 使用 默认的蓝色 样式 –>
<ul class="pagination" id="pagination2"></ul>

<script type="text/javascript" src="inc/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="inc/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript">
pageOnLoad("kkpager", "kknum");
</script>
</body>
</html>

—————————————————– demo.html end —————————————————-

在IE下的分页样式 （bootstrap.min.css）显示错乱。其原因是css样式不能适应<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，如果改成 <!DOCTYPE html> 才能正常显示，请帮忙解决谢谢了！！！

$.jqPaginator(‘#pagination1′, {
totalPages: totalPage,
visiblePages: visitablePage,
currentPage: 1,
prev: ‘<li class="prev"><a href="javascript:;">上一页</a></li>’,
next: ‘<li class="next"><a href="javascript:;">下一页</a></li>’,
page: ‘<li class="page"><a href="javascript:;">{{page}}</a></li>’,
first: ‘<li class="first"><a href="javascript:;">首页</a></li>’,
last: ‘<li class="last"><a href="javascript:;">末页</a></li>’,
onPageChange: function (num, type) {
if(type == ‘init’) {return;}
page = num;
query();
}
});
query是查询数据，查询完成后，会把总条数和显示页数统计，再次调用分页进行重新分页。我在做第一版的时间，是正常的。但第二版是page会永远停在第一页上。第一版和第二版代码没有任何修改。

请教如何将前一页 后一页 第一页 之类的英文改为中文？作者有没有想过增加一个输入自定义页面点击跳转的功能呢？谢谢！

哦哦，谢谢啊！这么快就回复了。没注意看，哈哈。

懂了，判断类型type

你的插件会影响别人的样式，简直是没法用

能不能显示总页数和当前页数?

初始化的时候，type是怎么赋值init的？

好好理解一下，我已经快晕了

hello，用你的插件发现个问题，如果把这个插件放在form中，无论用onclick=return false还是jquery的方式屏蔽form的默认提交事件都会失效

还有，循环的图片块是在jade里面用for循环mixin显示出来的，需要把循环来的这些图片块进行分页，我怎么使用这个分页插件来获取到图片块