通用分页 （基于jquerybootstrap）

Posted 2022-10-18 暴疯禹

 基于bootstrap的"通用分页"v2.0（有人用的话，我可以升级）

实现：

          1.同一个页面下，多个分页条互不干扰。

          2.配置、使用方便。

          3.通过配置、修改容器的属性(pagenumber、totalpage、paginationMaxLength、onlyOnePageIsShow)，来动态改变分页条

参数：

          1.pagenumber                       当前页码（必填）

          2.totalpage                            总页数（必填）

          3.paginationMaxLength         页码最大显示长度数（默认10，可以去pagination.js中设置）

          4.onlyOnePageIsShow          只有一页的时候是否显示（默认true，可以去pagination.js中设置）

回调函数：

          1.回调函数 paginationClick(pagination_id) ：                 pagination_id是单击页码<li>时对应的容器的id。所以容器一定要有id（如下div）

常用的方法：

          1.Initpagination(element);                         初始化或更新 element分页条

          2.paginationInit();                                      初始化或更新 所有分页条

====================================================================================================================================

测试代码：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="pagination.js"></script>

<div id="test1" style="text-align: center;" pagination="pagination_new" pagenumber="11" totalpage="13"></div>
<hr >
<div id="test2" style="text-align: center;" pagination="pagination_new" pagenumber="14" totalpage="15" ></div>
<hr >
<div id="test3" style="text-align: center;" pagination="pagination_new" pagenumber="1" totalpage="1" onlyOnePageIsShow="false"></div>
<hr >
<div id="test4" style="text-align: center;" pagination="pagination_new" pagenumber="1" totalpage="1" ></div>
<hr >
<div id="test5" style="text-align: center;" pagination="pagination_new" pagenumber="10" totalpage="15" paginationMaxLength="5" onlyOnePageIsShow="false"></div>
<hr/>
<button id="btn1">手动刷新指定分页条</button>
<button id="btn2">手动刷新全部分页条</button>
<script>
    function paginationClick(pagination_id)
        var pagenumber = $('#'+pagination_id+'').attr('pagenumber');
        var totalpage = $('#'+pagination_id+'').attr('totalpage');
        alert('zmy通用分页测试：当前id：'+pagination_id+' , pagenumber:'+pagenumber+' , totalpage:'+totalpage);
    
    $(function()
        $('#btn1').click(function()
            $('#test3').attr('pagenumber','2');
            $('#test3').attr('totalpage','4');
            initPagination($('#test3'));
        );
        $('#btn2').bind('click',function()
            $('#test3').attr('pagenumber','2');
            $('#test3').attr('totalpage','4');

            $('#test1').attr('pagenumber','7');
            $('#test1').attr('totalpage','10');
            $('#test1').attr('paginationMaxLength','6');
            paginationInit();
        );
    );
</script>

================================华丽的分隔符====================================

结果：

 

1.2.3.4.5.

==================================华丽的分隔符====================================

pagination.js源码

/**
 * Created by zmy on 2016/7/13.
 */

var paginationMaxLength=10;//分页栏的最大显示条数
var onlyOnePageIsShow = true;//只有一页的时候是否显示
function paginationInit()
    $('[pagination =pagination_new ]').each(function()
        initPagination($(this));
    );

function isNeedPagination(totalpage,settingfromhtml)
    var condition ;
    if(settingfromHTML == "true")
        condition = true;
    else if(settingfromHTML == 'false')
        condition = false;
    else 
        condition = onlyOnePageIsShow;
    
    if(condition && totalpage<1)
        return false;
    else if(!condition && totalpage<=1)
        return false;
    
    return true;

function setDisplayMaxLength(element,len)
    var currentpage =  Number(element.attr('pagenumber'));
    var totoalpage = Number(element.attr('totalpage'));
    if(checkParamIsPositiveInteger(len))
        len = Number(len);
    else
        len =paginationMaxLength;
    
    if(len<totoalpage)
        var temp1 = parseInt((len-1)/2);
        var temp2 = parseInt(len/2);
        if(temp1<temp2)
            var leftstart = currentpage - temp1;
            var rightend = currentpage + temp1 + 1;
        else
            var leftstart = currentpage - temp1;
            var rightend = currentpage + temp1;
        
        if(leftstart<1)
            rightend +=(1-leftstart);
            leftstart = 1;
        
        if(rightend>totoalpage)
            if(leftstart>1)
                leftstart -=(rightend-totoalpage);
            
            rightend =totoalpage;
        
        if(leftstart<1)
            leftstart=1
        
        while(leftstart >1)
            element.children('ul').children('li[value = '+(--leftstart)+']').css('display','none');
        
        while(rightend <totoalpage)
            element.children('ul').children('li[value = '+(++rightend)+']').css('display','none');
        
    

//根据页面pagenumber、my_totoalpage更新分页，参数element传的是分页的容器
function initPagination(element)
    element.html('');
    var pagenumber = element.attr('pagenumber');
    var totalpage = element.attr('totalpage');
    var pMaxLength = element.attr('paginationMaxLength');
    var onePageIsShow = element.attr('onlyOnePageIsShow');
    if(isNeedPagination(Number(totalpage),onePageIsShow))
        var content = '<ul class="pagination"><li value="0"><a href="javascript:void(0);">«</a></li>';
        for(var i =1; i<=totalpage;i++)
            content +='<li value="'+i+'"><a href="javascript:void(0);">'+i+'</a></li>'
        
        content +='<li value="-1"><a href="javascript:void(0);">»</a></li></ul>';
        element.append(content);
        element.children('ul').children('li[value='+pagenumber+']').attr('class','active');
        setDisplayMaxLength(element,pMaxLength);
        addClickListener(element);
    

function addClickListener(element)
    element.children('ul').children('li').bind('click',function()
        var temp = Number($(this).attr('value'));
        var pagenumber = Number($(this).parent().parent().attr('pagenumber'));
        var totalpage = Number($(this).parent().parent().attr('totalpage'));
        if(temp == 0)
            temp = pagenumber-1;
        else if(temp == -1)
            temp = pagenumber+1;
        
        if(temp != pagenumber && temp !=0 && temp<=totalpage)
            $(this).parent().parent().attr('pagenumber',temp);
            paginationClick(element.attr("id"));
            initPagination(element);
        
        return false;
    )

function checkParamIsPositiveInteger(param)
    var reg = /^[1-9]+[0-9]*]*$/;
    return reg.test(param);


//用户需要自己实现的点击事件，参数为分页容器的id
function paginationClick(pagination_id)


$(function()
    paginationInit();
);