jQuery分页插件（原创）

所属分类： JQ特效导航分页

查看演示立即下载

插件描述：jQuery分页插件，支持ie8及以上，注意jquery 2.0版本及以上不支持ie8及以下了

更新时间：2019-10-28 22:46:25

更新说明：添加了选择每页显示多少条的选项

更新时间：2019/10/13 下午3:07:59

更新说明：在传入数据总条数为0时，不显示分页

更新时间：2019/8/2 上午9:34:54

更新说明：修改方法为构造函数，第一个参数传选择器，第二个参数传配置。

添加跳多少页的方法setCurrent

// 初始化分页 
var paging1 = new MyPaging('#box2', {
    size: 1,
    total: 0,
    current: 1,
    prevHtml: '上一页',
    nextHtml: '下一页',
    layout: 'total, totalPage, prev, pager, next, jumper',
    jump: function() {
        var _this = this; // 模拟ajax获取数据
        setTimeout(function() {
            var res = getData({
                size: _this.size,
                current: _this.current
            }) setTbody(res.list); // 必须调用 
            _this.setTotal(res.total);
        }, 100);
    }
});
$('.jumpBtn').on('click', function() {
    paging1.setCurrent(1);
})

更新时间：2019/7/26 下午2:55:02

更新说明：解决在1到2之间出现...，以及在最大与第二大之间出现...问题。

使用方法

html：

需要一个盒子用来放分页内容，注意可以通过设置paging - box的text - align来设置分页插件的位置

1	`<div` `class="box2"></div>`

js：

$('.paging-box').MyPaging({
    size: 3,
    total: 0,
    current: 1,
    prevHtml: '上一页',
    nextHtml: '下一页',
    jump: function() {
        var _this = this;
        // 模拟ajax获取数据
        setTimeout(function() {
            var res = getData({
                size: _this.size,
                current: _this.current
            })
            setTbody(res.list);
            // 必须调用
            _this.setTotal(res.total);
        }, 100);
    }
});

默认配置

/**
opt: {
    linkNum: 5,// 中间按钮个数 默认5
    current: 1,// 页面初始当前页        默认1
    size: 10,       // 每页显示的条数        默认10
    layout: 'total, prev, pager, next, jumper',// 设置显示的内容// 默认'total, prev, pager, next, jumper'
    prevHtml: '<',// 上一页html               默认<
    nextHtml: '>',// 下一页html               默认>
    jump: fn        // 跳转时执行方法 必须
}
jump方法中获取当前页数this.current，获取显示条数this.current
jump中必须调用this.setTotal(100)方法设置总页数
*/

注意注意注意：在jump方法中必须调用setTotal方法来设置total数，而且会在setTotal中更新分页的html代码

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery bootstrap紫色风格响应式网站模板
下一个特效：手机app金融理财类页面模板