分享一款分页插件

最近做网站需要用到分页功能,试用了很多的分页插件看到一个还可以的.


原插件的描述与使用方法:

插件描述:jquery分页插件,可定义ajax获取数据的路由


使用方法:

1.插件依赖jquery,使用前需要先引入jquery库

2.可定制生成分页的样式及ajax获取数据后处理dom元素的方法,例如:

$("#pager").zPager({
    url:'pageData.json',
    htmlBox: $('#wraper'),
    btnShow: false,
    dataRender: function(data){
        //ajax获取每页data数据后,可用此方法生成数据列表
        //此方法有默认function,也可以不写 具体参考demo
        console.log(data+'---ajax获取到的json格式的data数据');
    }
});

部分配置说明:

$.fn.zPager.defaults = {
totalData: 10, //数据总条数
pageData: 4, //每页数据条数
pageCount: 0, //总页数
current: 1, //当前页码数
pageStep: 10, //当前可见最多页码个数
minPage: 5, //最小页码数,页码小于此数值则不显示上下分页按钮
active: 'current', //当前页码样式
prevBtn: 'pg-prev', //上一页按钮
nextBtn: 'pg-next', //下一页按钮
btnBool: true, //是否显示上一页下一页
firstBtn: 'pg-first', //第一页按钮
lastBtn: 'pg-last', //最后一页按钮
btnShow: true, //是否显示第一页和最后一页按钮
disabled: true, //按钮失效样式
ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
url: '', //ajax路由
htmlBox: '' //ajax数据写入容器
}


发现他的插件不能实现真正的获取数据分页

对插件进行了下修改就可以了

原代码:
dataRender: function(_v, _data) {
            var opts = _v.data("options");
            var cells = '';
            for (var i = 0; i < _data.length; i++) {
                cells += '<div class="cc_cells"><a href=""><span>' + _data[i].id + '-' + Math.random() + '</span>';
                cells += '<span>' + _data[i].title + '</span>';
                cells += '<span>' + _data[i].starttime + '</span>';
                cells += '<span>' + _data[i].endtime + '</span>';
                cells += '</a></div>';
            }
            if (opts.htmlBox === '' || (typeof (opts.htmlBox) !== 'Obeject')) {
                var abx = _v.prev();
                if (!abx.hasClass('pagerHtmlWrap')) {
                    var d = '<div class="pagerHtmlWrap"></div>';
                    _v.before(d);
                }
                _v.prev().html(cells);
            } else {
                opts.htmlBox.html(cells);
            }
        },
我修改后代码:
dataRender: function(_v, _data){
var opts = _v.data("options"),
max = opts.current * opts.pageData,
min = (opts.current * opts.pageData) - opts.pageData,
arr = _data.slice(min,max);
var cells = '';
for(var i=0;i<arr.length;i++){
cells += '<li>';
cells += '<p class="id">' + arr[i].id +'</p>';
cells += '<p class="p-name">' + arr[i].title +'</p>';
cells += '</a></li>';
}
if(opts.htmlBox===''||(typeof(opts.htmlBox)!=='Obeject')){
var abx = _v.prev();
if(!abx.hasClass('pro-list')){
var d = '<ul class="pro-list"></ul>';
_v.before(d);
}
_v.prev().html(cells);
}else{
opts.htmlBox.html(cells);
}
},

原插件地址:简易ajax生成分页插件

修改过后的源码:paging.zip


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
  • 2019-04-02 09:03:14

    发现博主写的文章都很实用,值得学习

Top

分享: