前端js分页功能的实现，非常实用，新手必看

Posted 2022-02-06 potatosme

  分享一个前端拿到数据后，自己生成分页的案例，案例如图显示，点击搜索后查询数据，显示数据列表，前端根据数据显示正确的分页

附上代码：代码附上,简单粗暴，自己用过的，兼容性好，没有封装，可以很好的分页原理，希望可以帮助到大家

html排版如下：

<!--搜索列表-->
<div class="search">
    <div class="container">
        <div class="searchList">
            <table id="searchList">
                <!--<tr>
                    <td>
                        <a href="">
                        <p class="title">正标题</p>
                        <p class="className"><span>所属分类</span><em class="date">2019-01-01</em></p>
                        <p class="detail">搜索详细信息展示，要考虑没有的情况下，不显示只显示标题</p>
                        </a>
                    </td>
                </tr>-->
            </table>
            <div class="pageRow">
                <div id="pageination"></div>
            </div>
        </div>
    </div>
</div>

js代码如下：每一步操作都有注释

//鼠标点击的时候搜索
    function searchAction() 
        var serchId=$(‘#serchId‘).val();
        $.ajax(
            type:"post",
            url:"Web/search",
            data:"search":serchId,
            success:function (data) 
                if(data.total!=0)
                    $(‘#searchList‘).empty();
                    $.each(data.list,function (i,obj) 
                        var lielem=‘<tr>\\n‘ +
                            ‘                    <td>\\n‘ +
                            ‘                        <a href="‘+obj.url+‘">\\n‘ +
                            ‘                        <p class="title">‘+obj.title+‘</p>\\n‘ +
                            ‘                        <p class="className" id="className‘+i+‘"></p>\\n‘ +
                            ‘                        <p class="detail" id="detail‘+i+‘"></p>\\n‘ +
                            ‘                        </a>\\n‘ +
                            ‘                    </td>\\n‘ +
                            ‘                </tr>‘;
                        $(‘#searchList‘).append(lielem);
                        if(obj.className!= null)
                            var spanElem=‘<span>‘+obj.className+‘</span>‘;
                            $(‘#className‘+i).append(spanElem);
                        
                        if(obj.creatTime!=null)
                            var emElem=‘<em>‘+obj.creatTime+‘</em>‘;
                            $(‘#className‘+i).append(emElem);
                        
                        if(obj.detail != undefined || obj.detail != null)
                            var detailElem=‘<p>‘+obj.detail+‘</p>‘;
                            $(‘#detail‘+i).append(detailElem);
                        

                    )
                    //位置1  对数据进行分页
                    $(‘#pageination‘).show();
                    pagination(3,1);
                else
                    $(‘#searchList‘).empty();
                    var strNull=‘<p style="text-align: center;line-height: 50px">暂无相关搜索结果</p>‘ +
                        ‘<p style="text-align: center"><a href="index.html"><button id="btnback" type="button">返回首页</button></a></p>‘;
                    $(‘#searchList‘).append(strNull);
                    $(‘#pageination‘).hide();

                


            

        );
    

   $(‘#serchId‘).on(‘keydown‘,function (event) 
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode==13) 
            searchAction();
        
    )


    //列表分页
    //perPage 每一页显示条数     current：当前第几页
    function pagination(perPage,current) 
        var tableData = document.getElementById("searchList");
        var totalCount=tableData.rows.length;  //总条数

        //设置表格总页数
        var totalPage=0;//列表的总页数
        var pageSize = perPage;
        if (totalCount/pageSize > parseInt(totalCount/pageSize))
            totalPage = parseInt(totalCount/pageSize)+1;
        else
            totalPage = parseInt(totalCount/pageSize);
        
        //对数据进行分页
        var currentPage=current;
        var startRow=(currentPage-1)*pageSize+1;
        var endRow=(currentPage*pageSize > totalCount ? totalCount : currentPage*pageSize);

        for(var i=1;i<(totalCount+1);i++)
            var irow = tableData.rows[i-1];
            if(i>=startRow && i<=endRow)
                irow.style.display = "block";
            else
                irow.style.display = "none";
            
        
        //位置2 生成当前的点击按钮
        createBtns(totalPage , current);
        //位置3  绑定点击事件
        bindClick(totalPage);

    
    //生成点击按钮
    //totalPages 分页的总页数
    //current当前页
    function createBtns(totalPages , current) 
        var tempStr = "";
        /*上一页按钮*/
        if (current > 1) 
           /* tempStr += "<span class=‘btn first‘ href=\\"#\\"  data-page = ‘1‘>首页</span>";*/
            tempStr += "<span class=‘btn prev‘ href=\\"#\\" data-page = "+(current-1)+">上一页</span>"
        
        /*中间页码的显示*/
        /*如果总页数超出5个处理办法*/
        if(totalPages<=5)
            for(var pageIndex= 1 ; pageIndex < totalPages+1; pageIndex++)
                tempStr += "<a  class=‘btn page"+pageIndex+"‘  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
            
        else
            if(current<5)
                for(var pageIndex= 1 ; pageIndex < 5; pageIndex++)
                    tempStr += "<a  class=‘btn page"+pageIndex+"‘  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
                
                tempStr+=‘<span>......</span>‘;
                tempStr += "<a  class=‘btn page"+totalPages+"‘  data-page = "+( totalPages )+"><span>"+ totalPages +"</span></a>";
            else if(current>= totalPages-4)
                tempStr += "<a  class=‘btn page"+1+"‘  data-page = "+( 1 )+"><span>"+ 1 +"</span></a>";
                tempStr+=‘<span>......</span>‘;
                for(var pageIndex= totalPages-4 ; pageIndex <= totalPages; pageIndex++)
                    tempStr += "<a  class=‘btn page"+pageIndex+"‘  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
                
            else if(current>=5 && current <totalPages-4)
                tempStr += "<a  class=‘btn page"+1+"‘  data-page = "+( 1 )+"><span>"+ 1 +"</span></a>";
                tempStr+=‘<span>......</span>‘;
                for(var pageIndex= current ; pageIndex <= current+4; pageIndex++)
                    tempStr += "<a  class=‘btn page"+pageIndex+"‘  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
                
                tempStr+=‘<span>......</span>‘;
                tempStr += "<a  class=‘btn page"+totalPages+"‘  data-page = "+( totalPages )+"><span>"+ totalPages +"</span></a>";
            
        
        /*下一页按钮*/
        if (current < totalPages) 
            tempStr += "<span class=‘btn next‘ href=\\"#\\"  data-page = "+(current+1)+">下一页</span>";
/*            tempStr += "<span class=‘btn last‘ href=\\"#\\" data-page = "+ (totalPages) +">尾页</span>";*/
        
        document.getElementById("pageination").innerHTML = tempStr;
    
    function bindClick(totalPage) 
        // 设置首页、末页、上一页、下一页的点击事件
        var buttonArr = [‘first‘,‘last‘,‘prev‘,‘next‘];
        for(var k in buttonArr)
            var $dom = ‘.‘+buttonArr[k];
            $(‘body‘).delegate( $dom , ‘click‘ , function () 
                var data = $(this).data(‘page‘);//获取当前按钮跳转的页数
                pagination(‘3‘ , data);//对页面进行分页
                //对当前页码的样式做处理
                $(‘.page‘+data).css(background:‘#0449d4‘,color:‘#fff‘).siblings().css(background:‘#fff‘,color:‘#999‘);
            )
        

        // 设置数码的点击事件 totalImgPage是总页数，为全局变量，在分页时被赋值
        for (var k  = 1 ;k <= totalPage ; k++)
            var $singleDom  = ‘.page‘+k;
            $(‘body‘).delegate( $singleDom , ‘click‘ , function () 
                var data = $(this).data(‘page‘);
                pagination(‘3‘ , data);//对页面进行分页
                //对当前页码的样式做处理
                $(‘.page‘+data).css(background:‘#0449d4‘,color:‘#fff‘).siblings().css(background:‘#fff‘,color:‘#999‘);
            )
        
    

基于jq复制完整代码此分页功还是能实现的，也展示的分页的原理，若有大神改进，望瞻仰！