js分页功能实现

本文转载自查看原文 2020-08-06 09:39 509 JS

1、js代码

  1  <script>
  2         var second_class=getParams("second_class");
  3         var first=getParams("first");
  4         var title=getParams("title");
  5         var pageIndex = getParams("page");
  6         var parent_id = getParams("parent_id");
  7         localStorage.setItem("second_class",second_class);
  8         localStorage.setItem("first",first);
  9         localStorage.setItem("title",title);
 10         localStorage.setItem("pageIndex",pageIndex);
 11         localStorage.setItem("parent_id",parent_id);
 12         var page=1; //设置首页页码
 13         var limit = 8;  //设置一页显示的条数
 14         var total;    //总条数
 15         var imageNum=0;
 16         var article_title = "";
 17         $(function () {
 18             $("#search").click(function(){
 19                 article_title = $("#text").val();
 20                 getList();
 21             })
 22             //分页参数（参数名固定不可变）
 23             var pageConfig = {
 24                 pageSize: 8,                //每页条数（不设置时，默认为10）
 25                 prevPage: '上一页',             //上一页（不设置时，默认为：<）
 26                 nextPage: '下一页',             //下一页（不设置时，默认为：>）
 27                 firstPage: '首页',            //首页（不设置时，默认为：<<）
 28                 lastPage: '末页',             //末页（不设置时，默认为：>>）
 29                 degeCount: 2,                //当前页前后两边可显示的页码个数（不设置时，默认为3）
 30                 ellipsis: true,               //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示
 31                 pageIndex: pageIndex || 1
 32             }
 33             getList();  //初始加载就查询
 34 
 35             //查询列表数据
 36             function getList() {
 37                 //初始化Paging实例(pageConfig参数也可以为空对象，此时就是默认设置)
 38                 var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
 39                      var shtml="";
 40                      var pageHtml = "";
 41                      var readRanking = "";
 42                      var origin="";
 43                     $.ajax({
 44                        url:ENERGY_DATA_BACK_END_DOMAIN+"/api/news/get/"+parent_id,
 45                        dataType:"json",
 46                         type: "POST",
 47                         data:{
 48                             "secondClass": second_class,
 49                             "page":pageIndex,
 50                             "limit":pageSize,
 51                             "status" :"1",
 52                             "title" : article_title
 53                         },
 54                         success: function (result) {
 55                                 if(result.count > 0){  //如果查询到了数据
 56                                     total=  result.count;
 57                                     var data=result.data;
 58                                     //列表显示
 59                                     for(var i=0;i<data.length;i++){
 60                                         var href=encodeURI("newsList-item.html?second_class="+second_class+"&id="+data[i].id+"&first="+first+"&title="+title +"&parent_id=" +parent_id +"&page=" +pageIndex);
 61                                         if(data[i].origin == "0"){
 62                                             origin= '本站原创' ;
 63                                         }if(data[i].origin == "1"){
 64                                             origin='外站转发';
 65                                         }
 66                                         if(data[i].coverImg==null || data[i].coverImg =="" ){     
 67                                             shtml+= '<li style="color:#000;height:90px;">'+
 68                                                 '<div style="float:left;width:680px;margin-top:24px">'+
 69                                                     '<span><a style="color:#000" class="link" target="_blank" href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" title="'+data[i].title+'">'+data[i].title+'</a></span><br>'+
 70                                                     '<div style="float:left;margin-top:3px;color:rgb(132,134,132);font-size:14px">'+
 71                                                         '<img style="float:left;height:10px;margin-top:7px;width:10px;" width="10" src="front/images/second_level/clock.png" alt="clock"/>'+
 72                                                         '<div style="float:left;margin-top:3px;margin-left:3px">'+data[i].publishTime+'</div>'+
 73                                                         '<div style="float:left;margin-top:3px;margin-left:50px;">来源：'+origin+'</div>'+
 74                                                     '</div>'+
 75                                                 '</div>'+
 76                                                 '<div>'+
 77                                                     '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+
 78                                                         '<img class="time"  style="height:20px;margin-top:44px;margin-left: 40px;width:30px;"  src="front/images/second_level/article_arrow.png" alt="article_arrow"/></a>'+
 79                                                 '</div>'+
 80                                             '</li>'+
 81                                             '<li class="line" style=" margin:0px;margin-top:0px; padding:0px; font-size:0px; height:2px; overflow:hidden; background:#e5e5e5;"></li>';
 82                                     }else{
 83                                         imageNum +=1;
 84                                         var url=ENERGY_FILE_BACK_END_DOMAIN+"/file?fileName="+data[i].coverImg;
 85                                         shtml+= '<li style="margin-top:0px;color: #000;height:90px;">'+
 86                                             '<div style="float:left;">'+
 87                                                 '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+
 88                                                     '<img style="height:80px;margin-top:7px; width:120px" src="'+url+'"/></a>'+
 89                                             '</div>'+
 90                                                 '<div style="float:left;width:550px;margin-left:10px;margin-top:24px">'+
 91                                                 '<span><a style="color:#000" class="link" target="_blank" href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" title="'+data[i].title+'">'+data[i].title+'</a></span><br>'+
 92                                                 '<div style="float:left;margin-top:3px;color: rgb(132,134,132);font-size:14px">'+
 93                                                     '<img style="float:left;height:10px;margin-top:7px;width:10px" src="front/images/second_level/clock.png" alt="clock"/>'+
 94                                                     '<div style="float:left;margin-top:3px;margin-left:3px">'+data[i].publishTime+'</div>'+
 95                                                     '<div style="float:left;margin-top:3px;margin-left:50px;">来源：'+origin+'</div>'+
 96                                                 '</div>'+
 97                                             '</div>'+
 98                                             '<div style="float:left;">'+
 99                                                 '<a href="javascript:;" onclick="javascript:window.location.href=\''+href+'\'" target="_blank" title="'+data[i].title+'">'+
100                                                 '<img class="time"  style="height:20px;margin-top:44px;margin-left:40px;width:30px;" src="front/images/second_level/article_arrow.png" alt="article_arrow"/></a>'+
101                                             '</div>'+
102                                         '</li>'+
103                                         '<li class="line" style="margin:0px; padding:0px; font-size:0px; height:2px; overflow:hidden; background:#e5e5e5;"></li>';
104                                     }    
105                                     }
106                                    
107                                     $(".news-list").empty().html(shtml);
108                                 
109                                     var totalCount = result.count;   //返回的总条数
110                                     var totalPage = Math.ceil(totalCount / pageSize);   //根据总条数和每页条数计算总页码数
111 
112                                     // 调用Paging实例的 initPage()方法生成分页DOM结构
113                                     pageIng.initPage(totalCount, totalPage, pageIndex);
114                                     $('.page').show();
115                                     $('.no-data').hide();
116                                 }else{  //如果未查询到数据
117                                     $(".news-list").empty().html('');
118                                     $('.page').hide();
119                                     $('.no-data').show();
120                                 }
121                         }
122                     })
123                 });
124             }
125         })
126  </script>

2、HTML

<div style="float:left;width: 820px;padding: 10px 20px;margin-left: 40px">
      <div style="height:780px">
            <div class="news-list" ></div>
      </div>
      <div style="float:left;width: 720px;height:30px;padding: 10px 20px;margin-left: 0px;margin-top:0px;font-size: 18px;color:reg(132,134,132)">
            <div class="page-r">
            <ul id="page_ul" class="page-ul"></ul>
            </div>
      </div> 
</div>

3、page.js

var tableStyle =
    ".page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}"+
    ".page .page-l select {width: 60px;height: 30px;}"+
    ".page .page-l .page-size-box {display: inline-block;margin-left: 20px;}"+
    ".page .page-r {float: right;padding-top: 10px;}"+
    ".page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}"+
    ".page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}"+
    ".page .page-r ul li a:hover {background-color: #f5f2f2;}"+
    ".page .page-r ul li:last-child {border-right: 1px solid #ccc;}"+
    ".page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}"+
    ".page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}"+
    ".page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}"+
    ".page .page-r ul li span.ellipsis {cursor: default;}";

var styleNode = document.createElement('style');
styleNode.innerHTML = tableStyle;
var headNode = document.getElementsByTagName('head')[0];
headNode.appendChild(styleNode);

function Paging(paramsObj, callback) {
    this.pageSize = paramsObj.pageSize || 8;    //每页条数（不设置时，默认为10
    this.pageIndex = paramsObj.pageIndex || 1;    //当前页码
    this.totalCount = paramsObj.totalCount || 0;   //总记录数
    this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0;     //总页数
    this.prevPage = paramsObj.prevPage || '<';     //上一页（不设置时，默认为：<）
    this.nextPage = paramsObj.nextPage || '>';     //下一页（不设置时，默认为：>）
    this.firstPage = paramsObj.firstPage || '<<';     //首页（不设置时，默认为：<<）
    this.lastPage = paramsObj.lastPage || '>>';     //末页（不设置时，默认为：>>）
    this.degeCount = paramsObj.degeCount || 3;             //当前页前后两边可显示的页码个数（不设置时，默认为3）
    this.ellipsis = paramsObj.ellipsis; //是否显示省略号不可点击按钮（true：显示，false：不显示）
    this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li style="float:left;margin-left:20px;"><span class="ellipsis">…</span></li>' : '';
    var that = this;

    $('#page_size').val(this.pageSize);
    callback && callback(this.pageIndex, this.pageSize);    //立即执行回调函数

    // 生成分页DOM结构
    this.initPage = function (totalCount, totalPage, pageIndex) {
        this.totalCount = totalCount;
        this.totalPage = totalPage;
        this.pageIndex = pageIndex;
        var degeCount = this.degeCount;
        var pageHtml = '';  //总的DOM结构
        var tmpHtmlPrev = '';   //省略号按钮前面的DOM
        var tmpHtmlNext = '';   //省略号按钮后面的DOM
        var headHtml = ''; //首页和上一页按钮的DOM
        var endHtml = '';   //末页和下一页按钮的DOM
        if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){   //前后都需要省略号按钮
            headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var count = degeCount;  //前后各自需要显示的页码个数
            for(var i=0; i<count; i++){
                if(pageIndex != 1){
                    tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
                tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面需要省略号按钮，后面不需要
            headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            if(pageIndex == totalPage){ //如果当前页就是最后一页
                endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{  //当前页不是最后一页
                endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                    '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
            }

            var count = degeCount;  //前需要显示的页码个数
            var countNext = totalPage - pageIndex;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<count; i++){
                    tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不需要，后面需要省略号按钮
            if(pageIndex == 1){ //如果当前页就是第一页
                headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
            }else{  //当前页不是第一页
                headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                    '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            }

            endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var countPrev = pageIndex - 1;  //前需要显示的页码个数
            var count = degeCount;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<count; i++){
                tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){   //前后都不需要省略号按钮
            headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            if(totalPage == 1){ //如果总页数就为1
                headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{
                if(pageIndex == 1){ //如果当前页就是第一页
                    headHtml = '<li style="float:left;margin-left:20px;"><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                        '<li style="float:left;margin-left:20px;"><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                    endHtml = '<li style="float:left;margin-left:20px;"><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                        '<li style="float:left;margin-left:20px;"><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
                }else if(pageIndex == totalPage){  //如果当前页是最后一页
                    headHtml = '<li style="float:left;margin-left:20px;"><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                        '<li style="float:left;margin-left:20px;"><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
                    endHtml = '<li style="float:left;margin-left:20px;"><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                        '<li style="float:left;margin-left:20px;"><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
                }
            }

            var countPrev = pageIndex - 1;  //前需要显示的页码个数
            var countNext = totalPage - pageIndex;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li style="float:left;margin-left:20px;"><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }
        $('#page_ul').html(pageHtml);
        $('#total_count').html(totalCount);
    };

    // 点击页码（首页、上一页、下一页、末页、数字页）
    $('#page_ul').on('click','a',function (e) {
        var _this = $(this);
        var idAttr = _this.attr('id');
        var className = _this.attr('class');
        if(idAttr == 'first_page'){ //如果是点击的首页
            that.pageIndex = 1;
        }else if(idAttr == 'prev_page'){    //如果点击的是上一页
            that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ;
        }else if(idAttr == 'next_page'){ //如果点击的是下一页
            that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1;
        }else if(idAttr == 'last_page'){ //如果点击的是末页
            that.pageIndex = that.totalPage;
        }else if(className == 'page-number'){   //如果点击的是数字页码
            that.pageIndex = _this.html();
        }
        /*var state = {
                title: title,
                url: window.location.href
            };
            window.history.pushState(state, document.title, window.location.href + "&page=" + that.pageIndex);*/
        callback && callback(that.pageIndex, that.pageSize);
    });

    // 改变每页条数
    $('#page_size').change(function () {
        var _this = $(this);
        that.pageIndex = paramsObj.pageIndex = 1;
        that.pageSize = paramsObj.pageSize = _this.val() - 0;
        callback && callback(that.pageIndex, that.pageSize);
    })
}

4.效果

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【javascript】html+原生js实现分页功能 vue实现分页功能 winform 实现分页功能分页功能的实现纯js实现分页 JS 实现分页打印 js实现分页 django中如何实现分页功能 GridView自带的分页功能实现基于InfluxDB实现分页查询功能