jquery分页组件(每页显示多少条)

/**
 *  功能说明：jPager 分页插件
 *  参数说明：pages:[] 分页的控件个数 @id:显示分页的div ID，@showSelectPage: 是否显示当前分页的条目过滤下拉框
 *  @currentpage 当前第几页
 *  @pagesize   type：number    每页显示多少条目
 *  @total       type：number   总条数
 *  @totalpage   type：number  总页码数
 * */

(function ($) {
    'use strict';

    $.jPager = function (option) {

        if (!option || option.totalpage == 0) {

            for (var i = 0; i < option.pages.length; i++){
                $('#'+ option.pages[i].id).empty();
            }
            return;
        }

        var limitNumber = [20, 30, 50];

        var defaultOption = {
            pages: [{
                id: '',
                showSelectPage: true
            }],
            currentpage: 1, //当前页
            pagesize: 20, //一页显示数量
            total:1, //条数
            totalpage: 1 //总页码
        };

        var pageObj = $.extend(defaultOption, option);

        if (pageObj.pages.length == 0) {
            return;
        }

        for (var i = 0; i < pageObj.pages.length; i++) {
            var obj = pageObj.pages[i];
            var _btnId = obj.id;
            var _isShowSelect = obj.showSelectPage;
            var tpl = '<div class="pager-left">总共&nbsp;'+ pageObj.total +'&nbsp;条</div></div><div class="pager-center"><span class="pager">';
            if (_isShowSelect) {
                tpl += '<span class="count" date-val="'+ pageObj.pagesize +'">'+ pageObj.pagesize +'</span>';
                tpl += '<span class="pageCount">';
                tpl += '<dl><dt class="open-dt" role-page="role-page" data-val="'+ pageObj.pagesize +'">';
                tpl += '<i class="icon-yt-menu-list"></i></dt>';
                tpl += '<dd style="display:none" data-val="'+limitNumber[0]+'">'+limitNumber[0]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
                tpl += '<dd style="display:none" data-val="'+limitNumber[1]+'">'+limitNumber[1]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
                tpl += '<dd style="display:none" data-val="'+limitNumber[2]+'">'+limitNumber[2]+'&nbsp;<i class="fa fa-check hide"></i></dd>';
                tpl += '</dl></span>';
            }

            tpl += '<span class="firstPage hide"><i class="fa fa-angle-double-left"></i></span><span class="pageContainer">';

            var _pages = [];
            if (pageObj.totalpage > 5) {

                if (pageObj.currentpage <= 3) {
                    _pages = [1, 2, 3, 4, 5];
                } else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage >= 2)){
                    _pages[0] = pageObj.currentpage - 2;
                    _pages[1] = pageObj.currentpage - 1;
                    _pages[2] = pageObj.currentpage;
                    _pages[3] = pageObj.currentpage + 1;
                    _pages[4] = pageObj.currentpage + 2;
                }else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage == 0)){
                    _pages[0] = pageObj.currentpage - 4;
                    _pages[1] = pageObj.currentpage - 3;
                    _pages[2] = pageObj.currentpage - 2;
                    _pages[3] = pageObj.currentpage - 1;
                    _pages[4] = pageObj.currentpage;
                }else if (pageObj.currentpage > 3 && (pageObj.totalpage - pageObj.currentpage == 1)) {
                    _pages[0] = pageObj.currentpage - 3;
                    _pages[1] = pageObj.currentpage - 2;
                    _pages[2] = pageObj.currentpage - 1;
                    _pages[3] = pageObj.currentpage;
                    _pages[4] = pageObj.currentpage + 1;
                }

            } else {
                for (var j = 0; j < pageObj.totalpage; j++ ) {
                    _pages[j] = j + 1;
                }
            }

            for (var k = 0; k < _pages.length; k++ ) {
                tpl += '<span class="page" data-page="page'+ _pages[k] +'">'+ _pages[k] +'</span>';
            }

            tpl += '</span><span class="lastPage hide"><i class="fa fa-angle-double-right"></i></span></span></div>';

            var _totalTpl = '<div class="pull-left">'+ pageObj.total +'&nbsp;<span>条数据</span></div>';
            var _select = '<select id="goToPage">';
            var _sOption = '';
            for(var p = 0; p < pageObj.totalpage; p++) {
                _sOption += '<option value="'+ (p + 1) +'">'+ (p + 1) +'</option>';
            }

            _select += _sOption + '</select>';
            var _gogoPage = '<div class="pager-right">跳转至'+ _select +'页</div>';
            if (obj.showTotal) {
                tpl = _totalTpl + tpl;
            }
            $('#'+_btnId).html(tpl+_gogoPage);
            $('#goToPage').val(pageObj.currentpage);

            //设置上一页 、下一页 是否可见
            if (pageObj.currentpage == 1) {
                if (pageObj.totalpage >1) {
                    $('.lastPage').removeClass('hide');
                }
            }else if (pageObj.currentpage > 1) {
                if (pageObj.currentpage == pageObj.totalpage) {
                    $('.firstPage').removeClass('hide');
                }else{
                    $('.firstPage').removeClass('hide');
                    $('.lastPage').removeClass('hide');
                }
            }

            //切换页码
            $('#goToPage').unbind().bind('change', function () {
                var _val = $(this).val();
                var page = {
//                    limit: $('.pager .count:eq(0)').text().trim(),
                    page: _val
                }

                obj.callback(page);
            });


            //点击页码数量
            $('.pageCount dd').click(function () {

                var _hasClass = $(this).children('i').hasClass('hide');
                if (!_hasClass) {
                    return;
                }

                var _text = $(this).text();
                var _val = $(this).attr('data-val');
                $('.pager .count').text(_text);
                $(this).siblings('dd').children('i').addClass('hide');
                $(this).children('i').removeClass('hide');
                if($('#limit')){
                    $('#ipt_limit').val(_text);
                }

                var page = {
                    limit: $('.pager .count:eq(0)').text().trim(),
                    page: 1
                }

                $('.pageCount dd').slideUp(10, function () {
                    $(this).siblings('dt').attr('style', '').attr('data-val', _val);
                    $(this).siblings('dd').children('i').addClass('hide');
                });
                obj.callback(page);
            });

            //点击页码
            $('span[data-page]').click(function () {
                var _hasClass = $(this).hasClass('active');

                if (_hasClass) {
                    return;
                }

                var _page = $(this).attr('data-page');
                $('span[data-page]').removeClass('active');
                //$(this).addClass('active');
                $('span[data-page="'+ _page +'"]').addClass('active');
                if($('#ipt_page')){
                    $('#ipt_page').val(_page);
                }

                var page = {
                    page: $('.pager:eq(0) .active').text().trim(),
                    limit: $('.pager .count:eq(0)').text().trim()
                }
                obj.callback(page);
            });

            //点击上一页
            $('#'+_btnId +' span .firstPage i').bind('click', function () {
                var currentPage = parseInt($('.pager:eq(0) .active').text().trim());
                if (currentPage == 1) {
                    $('.firstPage').addClass('hide');
                    return;
                }
                var page = {
                    page: 1,
                    limit: $('.pager .count:eq(0)').text().trim()
                }
                obj.callback(page);
            });

            //点击下一页
            $('#'+_btnId +' span .lastPage i').click(function () {
                var currentPage = parseInt($('.pager:eq(0) .active').text().trim());
                if (currentPage == pageObj.totalpage) {
                    $('.lastPage').addClass('hide');
                    return;
                }
                var page = {
                    page: pageObj.totalpage,
                    limit: $('.pager .count:eq(0)').text().trim()
                }
                obj.callback(page);
            });
        }

        //初始化，选中当前页码
        $('span[data-page]').removeClass('active');
        $('span[data-page="page'+ pageObj.currentpage +'"]').addClass('active');

        /* 切换每页条数  */
        $('.pageCount dt').click(function() {

            var _val = $(this).attr('data-val');
            $(this).siblings('dd[data-val="'+_val+'"]').children('i').removeClass('hide');

            $('dd').slideUp(10, function() {
                $('.select-has-border').removeClass('select-has-border-open').children('dd').css('display', 'none');
                $('.campaign-query').css('border-radius', '5px');
                $('.cp-select').removeClass('cp_select_open');
            });
            var _isShow  = $(this).siblings('dd').css('display') == 'none' ? false : true;
            if (_isShow) {
                $(this).siblings('dd').hide();//.removeClass('page-Open').addClass('page-Close')
                var _css = {
                    'borderTop': '0px solid #ccc',
                    'border-top-right-radius': '0px',
                    'border-top-left-radius': '0px',
                    'backgroundColor': 'white',
                    'color': ''
                };
                $(this).css(_css);
            } else {
                $(this).siblings('dd').slideDown(10);//.removeClass('page-Close').addClass('page-Open')
                var _css = {
                    'border-top-right-radius': '5px',
                    'border-top-left-radius': '5px',
                    'backgroundColor': '#414C59',
                    'color': 'white'
                };
                $(this).css(_css);
            }
        });

    };
})(jQuery);

/*  分页  */
.pager{
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin-top: 0;
    margin-left: 70px;
    display: inline-block;
}

.pager{
    float:left;
}

.pager .pageCount{
    float:left;
    60px;
    height: 30;
    line-height: 30px;
    text-align: left;
    margin-left: -5px;
    text-indent: 5px;
}

.pager .count{
    padding-top:3px;
    float:left;
    cursor:default;
}

.pager .pageCount dl{
    margin: 0;
    padding: 0;
     60px;
}

.pager .pageCount dt>i:first-child{
    vertical-align:bottom;
    margin-top: 3px;
}

.pager .pageCount dd{
    background-color: #414C59;
    height: 24px;
    60px;
    line-height: 24px;
    text-align: left;
    text-indent: 5px;
    color: white;
    border:none;
}

.pager .pageCount dd:last-child{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pager .pageCount dd:hover{
    background-color: #333E4D;
}

.pager-left{
    float:left;
     100px;
}

.pager-center{
    float:left;
     340px;
}

.pager-right{
    float: left;
     160px;
}

#goToPage{
    50px;
    margin-left: 5px;
    margin-right: 5px;
}

.pager dt:hover{
    color:#2AC3FA;
}

.pager .firstPage{
    margin-left: 20px;
}

.pager .firstPage>i{
    margin-top: 5px;
}

.pager .page{
    margin-left: 5px;
}

.pager .lastPage{
    margin-left: 10px;
}

.pager .lastPage>i{
    margin-top: 5px;
}

.pager i.little{
    font-size:10px;
    vertical-align: top;
    margin-top: 5px;
    margin-left: 2px
}

.pager span{
    cursor: pointer;
    border:1px solid transparent;
}

.pager .page{
    padding-left: 3px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 5px;
}

.pager span.active{
    background-color: #2AC3FA;
    color:white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 2px;
    border-radius: 5px;
}

.pager span.page:hover{
    background-color: white;
    border:1px solid #2AC3FA;
    color:#2AC3FA;
}

.pager .lastPage:hover, .pager .firstPage:hover{
    color:#2AC3FA;
}

.pager .open{
    color:#ffffff;
    background-color: #414C59;
}

.pager span{
    display:inline-block;
    height: 24px;
    line-height: 20px;
    margin-left: 2px;
    float: left;
}

.pager .pageContainer{
    display: inline-block;
    min- 26px;
     auto;
    height: 30px;
    line-height: 30px;
    overflow:hidden;
}

需要的参数：

使用方法：

//分页控件
                var option = {
                    pages: [{
                        id: 'pageIndex',
                        showSelectPage: false,
                        callback: function (option) {
                            //点击页码回调函数
                            //goPage(option);
                            var param = {
                                'grade_id': $('#addGrade').val(),
                                'class_id': $('#addClass').val(),
                                'start_date':  $('#startTime').val(),
                                'end_date': $('#endTime').val(),
                                'status': $('#foodStatus').val()
                            };

                            param = $.extend(param, option);
                            renderSyllabusIndex(param); //点击页码的回调函数
                        }
                    }],
                    pagesize: _data.pagesize,
                    total: _data.total,
                    currentpage: _data.currentpage,
                    totalpage: _data.totalpage
                };

                $.jPager(option);

效果：