分页选择器--基于jQuery

来源：互联网发布：网络在生活中的应用编辑：程序博客网时间：2024/06/06 17:59

我只是个写页面的，请不要为难我。。。
写了个分页器，自我感觉良好
这里写图片描述
css部分

.pagination{ width: 100%; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); text-align: center; z-index: 50;}.pagination div,.pagination li,.pagination input,.pagination a{ display: inline-block; color: #4b8ca0; margin: 0 2.5px;}.pagination .borderBox{ border: 1px solid #4b8ca0; line-height: 26px; vertical-align: middle;}.pagination .paddingBox{ padding: 0 5px; cursor: pointer;}.paging .borderBox{ width: 26px; text-align: center; cursor: pointer;}.paging .borderBox.active,.pagination a{ background: #4b8ca0; color: #fff;}.pagination .page,.pagination .pageJump{ margin-right: 20px;}.pagination .pageSize{ margin-right: 5px;}.pagination .pageJumpNum{ width: 55px; height: 26px; padding-left: 5px;}.pagination .select{ position: relative;}.pagination .select span{ float: left; width: 29px; line-height: 28px; text-align: center;}.pagination .pageSizeBtn{ height: 28px; background: #4b8ca0; float: right; position: relative; cursor: pointer;}.pagination .pageSizeBtn:before{ content: ""; box-sizing: border-box; position: absolute; top: 5px; left: 9px; width: 4px; height: 4px; border-left: 6px solid #fff; border-bottom: 6px solid #fff; border-top: 6px solid #4b8ca0; border-right: 6px solid #4b8ca0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}.pagination .selectCon{ display: none; width: 58px; height: 135px; background: #fff; position: absolute; top: -140px; left: -1px; margin: 0;}.pagination .selectCon li{ width: 58px; line-height: 27px; margin: 0;}.pagination .selectCon li.active{ background: #4b8ca0; color: #fff;}

html部分

<div class="pagination" id="pagination"></div>

html中获取的page相关数据，调用生成分页函数

<script type="text/javascript">    var paginationJson = {        currentPage: 1,        pageSize: 10,        pageCount: 11,        total: 101,    }    creat_pagination(paginationJson);</script>

生成page的方法，以及相关操作

var pageCount = '';var currentPaging = 1;var currentPageSize = 10;var total = 0;function creat_pagination(paginationJson){    pageCount = paginationJson.pageCount;    currentPaging = paginationJson.currentPage;    currentPageSize = paginationJson.pageSize;    total = paginationJson.total;    var pageHtml = '<div class="page">'                        +'<div class="prevPage paddingBox borderBox">上一页</div>'                        +'<div class="paging"></div>'                        +'<div class="nextPage paddingBox borderBox">下一页</div>'                    +'</div>'                    +'<div class="pageJump">'                        +'<span>跳转到</span>'                        +'<input type="number" class="pageJumpNum borderBox" min="1" max="'+pageCount+'" id="pageJump" />'                        +'<a href="javascript:void(0)" class="paddingBox borderBox" id="pageJumpBtn">跳转</a>'                    +'</div>'                    +'<div class="pageSize">'                        +'<span>每页显示</span>'                        +'<div class="select borderBox">'                            +'<span id="pageSize">10</span>'                            +'<span class="pageSizeBtn"></span>'                            +'<div class="selectCon borderBox">'                                +'<ul>'                                    +'<li class="active">10</li><li>20</li><li>30</li><li>50</li><li>100</li>'                                +'</ul>'                            +'</div>'                        +'</div>'                    +'</div>'                    +'<div class="total">共'+total+'条</div>';    $('#pagination').html(pageHtml);    creat_paging(currentPaging,pageCount);    $('#pageSize').html(currentPageSize);    $('.pageSizeBtn').click(function(){        if($('.selectCon').is(':hidden')){            $('.selectCon').show();        }else{            $('.selectCon').hide();        }    });    /* 单击某页 */    $('.pagination .selectCon li').click(function(){        var pageTotal = pageCount*currentPageSize;        $(this).addClass('active').siblings().removeClass('active');        var newPageSize = Number($(this).html());        $('#pageSize').html(newPageSize);        paginationJson.pageSize = currentPageSize = newPageSize;        var newPageCount = Math.ceil(total/newPageSize);        paginationJson.pageCount = pageCount = newPageCount;        if(currentPaging >= newPageCount){            currentPaging = newPageCount;        }        $('#pageJump').attr('max',newPageCount);        creat_paging(currentPaging,pageCount);        $('.selectCon').hide();    });    /* 上一页 */    $('.prevPage').click(function(){        if(currentPaging == 1){            return false;        }else{            creat_paging(currentPaging-1,pageCount);        }    });    /* 下一页 */    $('.nextPage').click(function(){        if(currentPaging == pageCount){            return false;        }else{            creat_paging(currentPaging+1,pageCount);        }    });    /* 跳转某页 */    $('#pageJumpBtn').click(function(){        var page = $('#pageJump').val();        if(page != '' || page != undefined || page != null){            page = Number(page);            creat_paging(page,pageCount);        }    });    document.onkeyup = keyUp;}/* 键盘操作 */function keyUp(e) {    var currKey = 0, e = e || event;    if (e.preventDefault) {        e.preventDefault();    } else {        e.returnValue = false;    }    currKey = e.keyCode || e.which || e.charCode;    if (currKey == 37 || currKey == 33) {        $('.prevPage').click();    } else if (currKey == 39 || currKey == 34) {        $('.nextPage').click();    }}/* 获取数据 */function get_list_data(){    //console.log('get_list_data--currentPage>'+currentPaging);    //console.log('get_list_data--pageSize>'+currentPageSize);}/* 根据currentPage，重写pageing */function creat_paging(currentPage,pageCount){    currentPaging = currentPage;    $('#pageJump').val(currentPaging);    var minPage = currentPage - 2;    var maxPage = currentPage + 2;    var pagingHtml = '';    var activeStr = '';    if(pageCount <= 7){        for(minPage = 1; minPage <= pageCount; minPage++){            if(minPage == currentPage){                activeStr = 'active';            }else{                activeStr = '';            }            pagingHtml += '<li class="borderBox '+activeStr+'">'+minPage+'</li>';        }        $('.paging').html('<ul>'+pagingHtml+'</ul>');    }else{        if(minPage <= 2){            minPage = 1;        }else{            pagingHtml = '<li class="borderBox">1</li><li>...</li>';        }        var endPageHtml = '';        if(maxPage >= pageCount-1){            maxPage = pageCount;            endPageHtml = ''        }else{            endPageHtml = '<li>...</li><li class="borderBox">'+pageCount+'</li>';        }        for(minPage; minPage <= maxPage; minPage++){            if(minPage == currentPage){                activeStr = 'active';            }else{                activeStr = '';            }            pagingHtml += '<li class="borderBox '+activeStr+'">'+minPage+'</li>';        }        pagingHtml += endPageHtml;        $('.paging').html('<ul>'+pagingHtml+'</ul>');    }    $('.paging .borderBox').click(function(){        $(this).addClass('active').siblings().removeClass('active');        var page = Number($(this).html());        creat_paging(page,pageCount);    });    get_list_data();}

0 1