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

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

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

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复制完整代码此分页功还是能实现的，也展示的分页的原理，若有大神改进，望瞻仰！

原文地址：https://www.cnblogs.com/PotatosMe/p/11075715.html