2014年5月10日
jqPaginator 基于jQuery的分页组件
项目主页:http://jqpaginator.keenwon.com
GitHub:https://github.com/keenwon/jqPaginator
现在网上各种各样的分页组件很多,但是很难找到十分“称心如意”的,于是jqPaginator诞生了。
我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了各种不同的场景。
jqPaginator是我业余学习的成果,技术有限,Bug和不合理之处再说难免,欢迎各位大牛指正,我会尽快响应的。
效果预览:
标签:JavaScript , Js控件
引用了 这个样式会影响 原页面样式
什么样式?jqPaginator没带样式吧?
这不是引了bootstrap的样式么?
也可以不引用,用你自己的,jqPaginator没带样式。
初始化的时候能不调用 onPageChange吗,这样容易死循环,总页数,和分页是一起查的
初始化的时候有调用,而且还分类型,你可以加个判断,避免死循环。具体的看看文档: http://jqpaginator.keenwon.com/
能不能加入页面输入框
输入页数跳转吗?这个暂时没有
页面同时引入两个会有一个失效!
主页上的demo就有好几个了…,具体怎么用的
<div id="list-pagination-top"></div>
<div id="list-pagination-bottom"></div>
$.jqPaginator(‘#list-pagination-top’, {
//内容太长省略
onPageChange: function (num) {
alert("top"+num);
}
});
$.jqPaginator(‘#list-pagination-bottom’, {
//内容太长省略
onPageChange: function (num) {
alert("bottom"+num);
}
});
这样使用onPageChange就有问题。
读了源码,进行了修改,已经fork并fixed这个问题。
你那样用实际上是同一个实例,一个页面多个分页的时候这样用:
$(‘#list-pagination-top’).jqPaginator(options);
$(‘#list-pagination-bottom’).jqPaginator(options);
这样就互不影响了
请问如果我想通过实现ajax无刷新的翻页,回调函数怎样写,这样写了发现没效果
$(function () {
$("#jqPaginator").jqPaginator({
totalCounts: ‘<%=pageCount %>’,
pageSize: 10,
visiblePages: 10,
currentPage: 1,
first: ‘<li><a href="javascript:void(0);">First</a></li>’,
prev: ‘<li><a href="javascript:void(0);">Previous</a></li>’,
next: ‘<li><a href="javascript:void(0);">Next</a></li>’,
last: ‘<li><a href="javascript:void(0);">Last</a></li>’,
page: ‘<li><a href="javascript:void(0);">{{page}}</a></li>’,
onPageChange: function (n) {
$.ajax({
type: "POST",
dataType: "text",
url: ‘/Admin/MngSection.aspx’,
data: "pageIndex=" + n + "&pageSize=" + pageSize,
success: function (data) {
if (data != "") {
$("#tblData tr:gt(0)").remove();//移除所有的数据行
data = $.parseJSON(data);
$.each(data.dtCato, function (index, cato) {
$("#tblData").append(‘<tr><td class="actions pull-center"><a id="’ + cato.CID + ‘" href="#" onclick="">删除</a></td><td class="name">’ + cato.Cato + ‘</td><td class="description">’ + cato.Type + ‘</td><td class="description">’ + cato.Path + ‘</td></tr>’); //将返回的数据追加到表格
});
}
}
});
}
});
})
$(‘#id’).jqPaginator(‘option’, {
currentPage: 1
});
这个扩展功能的使用不正常呀
我试了下正常的,要不你把完整点的代码贴上来
我问问,如果我要多已经分页的数据在过滤,分页。如何初始化jqPaginator
再次调用 $(‘#id’).jqPaginator() 就可以,和初始化一样的
再次调用 $(‘#id’).jqPaginator({……}) 就可以,和初始化一样的
发现一个很奇怪的bug,我设置visiblePages=10 ,然后我的数据查询出来总页数是7,这时分页正常显示,但是点到第5页的时候分页的数字就没了,只有“首页”“上一页”“下一页”“末页”,我调试了下js,发现在147行 start = 1+totalPages-visiblePages ,这样计算出来start应该等于1,但是到150行start居然变成了10,导致下面的while不能执行。147行到150行之间只有一个花括号,实在不明白为啥start突然变成10了。
好吧弄清楚了,原来我传totalPages的时候直接引用了json的原始数据,是个字符串,parseInt一下就好了
呃,抽空再升级一个版本吧,做一下int的验证。
大哥,这个组件怎么用?
为什么点页码没有反应?
http://jqpaginator.keenwon.com/ 这个页面试试,你用什么浏览器?
用的就是这个。我写的程序是后台数据库查询数据,然后分页显示,分页时需要传递当前页数。点击页数时,也能获得传递的参数,但是页面不能自动刷新,这是为什么,按理说,既然参数都能获得,程序应该重新运行一遍啦!我用的是火狐浏览器,求大神指教!
在回调函数里写ajax取数据,重新填充到页面。火狐是可以调试的,看看有没有报错,参数有没有传对!
好的,我再看看,谢了大神!
有ajax从服务器获取数据,分页的例子吗?
没有现成的,很简单的,自己改改就好了
样式怎么加呀,控件不带样式呀。
我写jqPaginator,就是为了脱离样式。
样式可以参考 http://jqpaginator.keenwon.com 里面的
我知道你这控件没样式,如何设置样式?css的类名能不能自定义,有什么格式要求?
不限格式,具体的文档里面写了。
能否增加自定义项,已支持组件显示数据总数或页面总数等自定义内容。
在page属性中可以设置,{{page}}代表当前页,{{totalPages}}代表总页数,{{totalCounts}}代表总条目数。
我的意思是在Last末页后面显示{{totalPages}},现在的问题是在哪里添加,而不是如何获得总页面数、总条目数。如:last : ‘<li class="last"><a href="javascript:void(0);">末页</a></li><li class="page"><a>共{{totalPages}}页</a></li>’, 这样只能显示末页,不能显示后面的自定义信息的。谢谢博主的回复!
你的意思是不是单独一个区域显示分页信息(总条目数和总页数之类的),这个我考虑过,暂时没有找到“优雅”的解决方法,目前之后在分页组件之外,自己手动完成了。如果你好办法,可以在github上fork jqPaginator的代码。
能做了reload方法么?比如我现在的列表用ajax删除了数据,那就得重新初始化下分页,如果能做到亮点就好了
再次执行jqPaginator方法就行了,把新的参数传入。
$("#paginworks").jqPaginator({
totalCounts:parseInt(totalC),
pageSize: 20,
currentPage: 1,
visiblePages:10
});
初始化后 又修改后点击页 不访问后台onPageChange: function (num, type) 不执行
没理解,详细点?
初始化加载时 页数改变执行onPageChange: function (num, type)
重新初始化后 页数改变不执行onPageChange: function (num, type)
我现在是在重新初始化的时候加上onPageChange: function (num, type) 但是这样就重复代码 我里面是ajax的请求
第二次初始化也要加上onPageChange
如果代码重复的,可以把onPageChange抽出来单独写成一个方法。
恩恩 谢谢你分享的插件 大赞下
分页按钮的长度会随着数字的大小而变化。例如:分页数字 1 和 10 的时候,长度是不一样的。能不能固定一个长度?
这个通过css可以处理
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 的的默认方法
,10);//总记录数
== ’1′ ? ‘click’ : ‘link’;//link / click 模式
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
var model = sp
//首页、上一页、下一页、末页 允许为空
$.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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 —————————————————-
大概看了一下你的意思。
首先,jqPaginator的初衷是“高度自定义,适用于各种场景”。
不知道你有没有注意文档中提到的占位符“{{page}}”,我觉得所谓的“link模式”可以使用占位符实现,例如page参数设置成:<a href="/url?page={{page}}">{{page}}</a>(你的扩展方向可以是把“占位符”这个功能做的更强大)。
感觉按你那样改的话,就比较麻烦了,好像也比较局限了。
还有你这个回复也太长了,改代码可以在Github上fork原项目。
KeenWon,您好!
想问一下,分页里面的HTML可以自定义增加一些内容吗?比如说<select></select>。因为有的时候需要通过选择每页显示条目,来展示列表。
这个目前没有集成在jqPaginator中。
不过这个功能比较简单,单独实现即可。
很赞!!!
请问怎么用啊?我后台传一串数据过来,你只配置了分页没有配置其他的东西。。
本来就是单纯的分页组件
要是有具体的后台交互demo就好了
$(‘#pagination’).jqPaginator({
totalPages:100,
pageSize:pageSize,
visiblePages: 1,
currentPage: 1,
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>’,
page: ‘<li class="page"><a href="javascript:;">{{page}}/{{totalPages}}</a></li>’,
onPageChange: function (num, type) {
page=num;
}
});
我一个页面有五个ajax分页,怎么调用这个分页方法额
5个ID,上面的代码写5次
如果这一页只有一条数据,删除这条数据会报错。
和删除有什么关系?
删到最后一条时报错:[jqPaginator] currentPage is incorrect
https://github.com/keenwon/jqPaginator/blob/master/src/js/jqPaginator.js#L77
你可以看一下什么情况下会报这个错
就是在删除的时候,单前页数没变,总页数发生了变化。l例如当前总页数是3,page翻到了第三页,第三页的数据都删除了,总页数变成2,可当前page还是3.。。。。
这已经不是jqPaginator要考虑的事情了。如果第三页已经删除了,再次请求第三页的时候,后端应该返回总页数2,当前页数2,然后前端调用jqPaginator,传入新的参数。
解决了,谢谢
应该把 totalCounts 改成 totalCount,更规范一些
在IE下的分页样式 (bootstrap.min.css)显示错乱。其原因是css样式不能适应<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,如果改成 <!DOCTYPE html> 才能正常显示,请帮忙解决谢谢了!!!
你让我这么解决呢?你不是都知道了吗?bootstrap本来就不兼容低版本IE,如果你仅仅是要使用分页才引入bootstrap的,那大可不必,完全可以自己写个简单的css。
CSS冲突怎么处理
关于样式,其实我已经说了好几遍了,jqPaginator是和样式无关的分页组建。CSS冲突怎么处理?改呗!难道是为了用jqPaginator引了demo里的boostrap?你完全可以用原来兼容的css呀?
jqPaginator的最大特点是适应不同的样式,风格。如果你只是找一个可以用的分页组件,也许jqPaginator并不适合你,如果你的项目(or公司)复杂,希望一套分页js可以兼顾不同的html或css,那么jqPaginator再合适不过了。
$.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会永远停在第一页上。第一版和第二版代码没有任何修改。
这也看不出什么
建议加个 只有一页 的时候,不显示分页
可以考虑…
请教如何将前一页 后一页 第一页 之类的英文改为中文?作者有没有想过增加一个输入自定义页面点击跳转的功能呢?谢谢!
http://jqpaginator.keenwon.com/ 这里面bootstrap风格的分页demo有两个,一个中文一个英文,你看下就知道了。
跳转功能和jqPaginator的整合有复杂,我还没想清楚,不过现有的api是可以自己实现这个功能的。
哦哦,谢谢啊!这么快就回复了。没注意看,哈哈。
朋友,又来麻烦你了。
我发现,我初始化分页以后,它会默认执行一次onPageChange。看到文档你提到(回调函数,当换页时触发(包括初始化第一页的时候))我想阻止初始化的这次 有办法吗?
懂了,判断类型type
我想问一下 onPageChange事件触发时,当前对象this是什么,能通过这个找到其父节点吗
当前的this对象就是传给jqPaginator的options,如果想改变this对象,可以使用jquery的$.proxy方法
谢谢,还有一个问题想请教下,totalPages是在页面加载完成后就固定的,但是如果现在我ajax插入了几条数据后页数增加了,在不刷新页面的情况下能动态更新totalPages的值吗
那需要再次调用$.jqPaginator
好的,十分感谢
你的插件会影响别人的样式,简直是没法用
我的插件没有样式,没法用就不要用了
该如何使用啊?我发现我这么菜u!
知道了, !!!正在努力分析中
能不能显示总页数和当前页数?
有人在吗
[打哈气]
引入两个以上会失效吗??怎么解决
什么引入两个以上,demo页就有好几个
如果我页面初始化时,需要对page进行初始化,但初始化就需要去查pageSize, totalCounts,currentPage,于是,就需要先去做一个查询。但onPageChange又调用的是查询。 但如果我先进行查询,但给jqpage初始化时,还要再用回调函数调用一次自己。我想这个死循环,是怎么根据type类型去判断的? 能写的例子吗?
我是这样写的,但觉得比较奇怪:
jquery.form.js用法- author: paincupid
<script type="text/javascript" src="/resources/js/jquery/jquery-1.11.3.min.js”>
<script type="text/javascript" src="/resources/js/jqueryForm/jquery.form.js”>
<script type="text/javascript" src="/resources/js/seleneJs/html5.js”>
<script type="text/javascript" src="/resources/js/seleneJs/jquery-ui-1.8.16.min.js”>
<link type="text/css" href="/resources/css/seleneTheme/css/ui-selene/jquery-ui-1.8.17.custom.css” rel=”stylesheet” />
<link rel="stylesheet" href="/resources/css/seleneTheme/site/css/master.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>
<script type="text/javascript" src="/resources/js/jqPaginator/jqPaginator.js”>
<!– –>
$(function(){
serach(1);
$(“#search_btn1″).click(function () {
serach(1);
});
});
function serach(currentPage){
$(“#currentPage”).val(currentPage);
$(“#searchForm1″).ajaxSubmit({
url :’${pageContext.request.contextPath}/jqueryFormPluginSimple/getForm’, //默认是form的action,如果申明,则会覆盖
type : “POST”, // 默认值是form的method(“GET” or “POST”),如果声明,则会覆盖
dataType : “json”, // html(默认)、xml、script、json接受服务器端返回的类型
beforeSubmit : function(){
// 提交前的回调函数,做表单校验用
$(“#name”).val(“lee李 – beforeSubmit”);
$(“#comment”).val(“呵呵ll123″);
return true;
},
beforeSerialize: function(){
//提交到Action/Controller时,可以自己对某些值进行处理。
$(“#id”).val(“lele李”);
$(“#name”).val(“lee李 – beforeSerialize”);
$(“#comment”).val(“呵呵ll123444″);
},
success: function(data){
if (data.success == true) {
buildTableData(data);
$.jqPaginator(‘#pagination’, {
visiblePages: 10,
currentPage: data.currentPage,
pageSize: data.pageSize,
totalCounts: data.totalCounts,
onPageChange: function (num, type) {
$(“#currentPage”).val(num);
$(“#searchForm1″).ajaxSubmit({
url :’${pageContext.request.contextPath}/jqueryFormPluginSimple/getForm’, //默认是form的action,如果申明,则会覆盖
type : “POST”, // 默认值是form的method(“GET” or “POST”),如果声明,则会覆盖
dataType : “json”, // html(默认)、xml、script、json接受服务器端返回的类型
beforeSubmit : function(){
},
beforeSerialize: function(){
},
success: function(data){
if (data.success == true) {
buildTableData(data);
}else{
alert(“error:”+data.responseText);
}
}
});
}
});
}else{
alert(“error:”+data.responseText);
}
}
});
}
function buildTableData(data){
var retlist = data.result;
$(“.retListTr”).remove();
for (var i = 0; i < retlist.length; i++) {
var vo = retlist[i];
var tbodyString = "”;
tbodyString = tbodyString + ” + (i + 1) + ”
+ ” + vo.id + ”
+ ” + vo.name + ”
+ ” + vo.age + ”
+ ” + vo.tel + ”
+ ” + vo.prov + ”
+ ” + vo.city + ”
+ ” + vo.town + ”
+ ” + vo.sex + ”
+ ” + vo.location + ”
+ ” + vo.company + ”
+ ” + vo.comment + ”;
tbodyString = tbodyString + “”;
$(“#retListBody”).append($(tbodyString));
}
}
function refreshPage(data){
}
jquery.form.js用法
pid
姓名
  
查询提交表单1
序号
id
姓名
年龄
电话
省
市
区
性别
地点
公司
备注
初始化的时候,type是怎么赋值init的?
是先有查询还是先初始化jqpage?
先得到数据,然后初始化jqPaginator
知道了怎么弄了。把代码贴出来,希望别人少走一些弯路。
function serach(currentPage){
$(“#currentPage”).val(currentPage);
$(“#searchForm1″).ajaxSubmit({
url :’${pageContext.request.contextPath}/jqueryFormPluginSimple/getForm’, //默认是form的action,如果申明,则会覆盖
type : “POST”, // 默认值是form的method(“GET” or “POST”),如果声明,则会覆盖
dataType : “json”, // html(默认)、xml、script、json接受服务器端返回的类型
beforeSubmit : function(){
},
beforeSerialize: function(){
},
success: function(data){
if (data.success == true) {
buildTableData(data);
//jqPaginator初始化
$.jqPaginator(‘#pagination’, {
visiblePages: 10,
currentPage: data.currentPage,
pageSize: data.pageSize,
totalCounts: data.totalCounts,
onPageChange: function (num, type) {
if(type==”init”) return;
serach(num);
}
});
}else{
alert(“error:”+data.responseText);
}
}
});
}
分页的内容区域要单独拿出来写html,然后调用进去吗?这个是局部刷新还是整个页面的?
这是ajax的
$.jqPaginator(‘#pagination’, {
totalPages: {$totalPages},
visiblePages: {$visiblePages},
currentPage: 1,
onPageChange: function (num, type) {
$(‘#inner’).load(“{:U(‘SalerSquare/indexdetail’)}”,{visiblePages:{$visiblePages},currentPage:num});
}
});
麻烦帮我看看,这种写法对不对的
$.jqPaginator(‘#pagination’, {
totalPages: {$totalPages},
visiblePages: {$visiblePages},
currentPage: 1,
onPageChange: function (num, type) {
$(‘#inner’).load(“{:U(‘SalerSquare/indexdetail’)}”,{visiblePages:{$visiblePages},currentPage:num});
}
});
帮我看下,这种写法对吗
不对,不同场景有不同的代码,建议你还是仔细看下demo http://jqpaginator.keenwon.com/ 理解清楚再做
好好理解一下,我已经快晕了
有些页面不显示,帮忙解释下,提示Uncaught Error: [jqPaginator] totalCounts or totalPages is required VM102928:62
self.verify VM102928:62
self.init VM102928:29
$.jqPaginator VM102928:236
$.jqPaginator VM102928:6
(anonymous function) VM102931:2
(anonymous function) VM102922:2
e.extend.globalEval VM102922:2
bp VM102922:2
e.extend.each VM102922:2
f.fn.extend.domManip VM102922:4
f.fn.extend.append VM102922:3
f.fn.extend.html VM102922:4
gotoFuncPage index.html:220
onclick
你要设置下totalCounts或者totalPages,如果无数据,就不需要调用jqPaginator方法了
能给个qq么~
能否动态修改onPageChange 方法?怎么修改
你在里面写条件判断不就好了?
hello,用你的插件发现个问题,如果把这个插件放在form中,无论用onclick=return false还是jquery的方式屏蔽form的默认提交事件都会失效
插件没有触发提交事件,你看看你href设置的是什么
已设置 javascript:;,感觉莫名其妙的..把插件拿出去到form外面就正常了..
请问你这个插件,是怎么获取到需要进行分页的内容的,是$ id或者class,对里面的元素进行分页吗?我有点搞不清,现在没有json数据,也暂时不和后台交互,对页面上的东西进行分页
还有,循环的图片块是在jade里面用for循环mixin显示出来的,需要把循环来的这些图片块进行分页,我怎么使用这个分页插件来获取到图片块
其实就是onPageChange里面控制哪些图片显示,哪些图片隐藏
能详细一点吗
假设我有20个图块,一页显示8个,那么初始化的时候onPageChange怎么写?现在我就是疑惑,这个插件是怎么知道我要对哪些东西进行分页
插件不知道你对哪些东西进行分页。他会在onPageChange告诉你当前用户点击了第几页,你在里面写代码,控制你的元素显示和隐藏。
http://jqpaginator.keenwon.com
哦哦,知道了,谢谢,原来是这样[哈哈]
$(‘#paging’).jqPaginator(‘destroy’); 怎么删除不掉啊
除了first,prev,next,last,page 我还想加其他的标签,要怎么写[疑问]
目前内置的就只支持这几个
比如我想在last的后面还有有总共多少页,每页多少条,一些内容,应该是需要新标签的吧,我不可能写在first,prev,next,last,page 这里面的,那这个怎么解决呢?
这个需要要在jqPaginator之外处理,本身没有这个功能
好吧,那我再jqPaginator里面加一个标签上去吧?
加标签需要改下源码,方便点的方法就是在jqPaginator的HTML容器之外定义你的自定义标签,然后在ajax返回后,完成jqPaginator的同时,做你自定义的操作。
好的,知道了,谢谢你!
可以覆盖renderHtml方法实现自己的分页方式
我现在用的是改过的, 追加了pageStyle属性,属性名后拼 RenderHtml 为对应的方法名,可以追加多套样式.
为什么一直提示 jqPaginator is not a function 呢?
在吗