jqPaginator 基于jQuery的分页组件

项目主页:http://jqpaginator.keenwon.com

GitHub:https://github.com/keenwon/jqPaginator


现在网上各种各样的分页组件很多,但是很难找到十分“称心如意”的,于是jqPaginator诞生了。

我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了各种不同的场景。

jqPaginator是我业余学习的成果,技术有限,Bug和不合理之处再说难免,欢迎各位大牛指正,我会尽快响应的。

效果预览:



标签: ,

  1. <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);

      这样就互不影响了

  2. 请问如果我想通过实现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>’); //将返回的数据追加到表格
    });
    }
    }
    });
    }
    });
    })

  3. 发现一个很奇怪的bug,我设置visiblePages=10 ,然后我的数据查询出来总页数是7,这时分页正常显示,但是点到第5页的时候分页的数字就没了,只有“首页”“上一页”“下一页”“末页”,我调试了下js,发现在147行 start = 1+totalPages-visiblePages ,这样计算出来start应该等于1,但是到150行start居然变成了10,导致下面的while不能执行。147行到150行之间只有一个花括号,实在不明白为啥start突然变成10了。

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

  5. 能否增加自定义项,已支持组件显示数据总数或页面总数等自定义内容。

    • 在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的代码。

  6. 能做了reload方法么?比如我现在的列表用ajax删除了数据,那就得重新初始化下分页,如果能做到亮点就好了

  7. $("#paginworks").jqPaginator({
    totalCounts:parseInt(totalC),
    pageSize: 20,
    currentPage: 1,
    visiblePages:10
    });
    初始化后 又修改后点击页 不访问后台onPageChange: function (num, type) 不执行

  8. 分页按钮的长度会随着数字的大小而变化。例如:分页数字 1 和 10 的时候,长度是不一样的。能不能固定一个长度?

  9. 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 —————————————————-

    • 大概看了一下你的意思。
      首先,jqPaginator的初衷是“高度自定义,适用于各种场景”。
      不知道你有没有注意文档中提到的占位符“{{page}}”,我觉得所谓的“link模式”可以使用占位符实现,例如page参数设置成:<a href="/url?page={{page}}">{{page}}</a>(你的扩展方向可以是把“占位符”这个功能做的更强大)。
      感觉按你那样改的话,就比较麻烦了,好像也比较局限了。

  10. KeenWon,您好!
    想问一下,分页里面的HTML可以自定义增加一些内容吗?比如说<select></select>。因为有的时候需要通过选择每页显示条目,来展示列表。

  11. $(‘#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分页,怎么调用这个分页方法额

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

    • 你让我这么解决呢?你不是都知道了吗?bootstrap本来就不兼容低版本IE,如果你仅仅是要使用分页才引入bootstrap的,那大可不必,完全可以自己写个简单的css。

    • 关于样式,其实我已经说了好几遍了,jqPaginator是和样式无关的分页组建。CSS冲突怎么处理?改呗!难道是为了用jqPaginator引了demo里的boostrap?你完全可以用原来兼容的css呀?
      jqPaginator的最大特点是适应不同的样式,风格。如果你只是找一个可以用的分页组件,也许jqPaginator并不适合你,如果你的项目(or公司)复杂,希望一套分页js可以兼顾不同的html或css,那么jqPaginator再合适不过了。

  13. $.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会永远停在第一页上。第一版和第二版代码没有任何修改。

  14. 61行 if (!opts.totalPages && !opts.totalCounts) { 当分页没有数据时这里会抛出异常

  15. 我查询的结果没有数据totalPages是0 totalCounts也是0,算是正常情况吧,不应该有异常吧

  16. 按照我的理解,这个时候就不需要分页了,也就没必要执行jqPaginator了,直接隐藏分页部分就好了。

  17. 楼主,想问一个问题 我想自己加一下 总条数之类的 扩展 怎么破 谢谢

  18. 楼主 可以加你qq吗 你写的这个插件挺好用的 留个qq可以吗,github 我设置了totalCounts好像没有出现效果

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

  20. 朋友,又来麻烦你了。
    我发现,我初始化分页以后,它会默认执行一次onPageChange。看到文档你提到(回调函数,当换页时触发(包括初始化第一页的时候))我想阻止初始化的这次 有办法吗?

  21. 如果我页面初始化时,需要对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

    姓名

    &nbsp&nbsp
    查询提交表单1

    序号
    id
    姓名
    年龄
    电话



    性别
    地点
    公司
    备注


  22. 知道了怎么弄了。把代码贴出来,希望别人少走一些弯路。
    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);
    }
    }

    });
    }

  23. 有些页面不显示,帮忙解释下,提示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

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

  25. 请问你这个插件,是怎么获取到需要进行分页的内容的,是$ id或者class,对里面的元素进行分页吗?我有点搞不清,现在没有json数据,也暂时不和后台交互,对页面上的东西进行分页

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

无觅相关文章插件,快速提升流量