jQuery分页小插件

源码如下:
$.fn.pager = function (pagerInfo) {
        var recordCount = this.size();
        if (recordCount <= pagerInfo.pagesize) return;
        var currentPageIndex = 1, //当前面,默认为1
        pageCount = Math.ceil(recordCount / pagerInfo.pagesize); //总页数
        //构建分页的html
        $('<div>一共' + this.size() + '条记录,一共' + pageCount + '页,当前第<span>1</span>页</div>')
            .insertAfter(pagerInfo.container)
            .append($('<a class="prev-page">上一页</a>').click(function () {
                if (currentPageIndex == 1) return;
                currentPageIndex--;
                showRecords(currentPageIndex);
                $(this).prev('span').text(currentPageIndex);
            }))
            .append($('<a class="prev-page" href>下一页</a>').click(function () {
                if (currentPageIndex == pageCount) return;
                currentPageIndex++;
                showRecords(currentPageIndex);
                $(this).prevAll('span').text(currentPageIndex);
            }))
            .css(pagerInfo.css)
            .find('span').css({ padding: 0 });

        var jRecords = this;  //保留作用域
        //pageIndex以1为开始
        var showRecords = function (pageIndex) {
            jRecords.hide();  //隐匿所有记录先
            var startIndex = (pageIndex - 1) * pagerInfo.pagesize,  //当前页的开始记录
                endIndex = (pageIndex * pagerInfo.pagesize) - 1;   //当前页的结束记录
            jRecords.filter(':eq(' + startIndex + '),:gt(' + startIndex + ')').show();  //显示大于开始记录(包含)的所有记录
            jRecords.filter(':gt(' + endIndex + ')').hide();  //隐藏大于结束记录的所有记录,以达到分页效果
        };

        showRecords(currentPageIndex);
    };


 使用举例:

$('#feedback ul li')  //数据源
.pager({ 
pagesize: 10, //分页大小
container: $('#feedback'), //容纳分页html的容器
css: { 'margin-left': '40px'} //分页html的样式
});



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值