后台返回所有数据，前端处理分页

最新推荐文章于 2023-08-02 06:00:00 发布

格格巫仙女

最新推荐文章于 2023-08-02 06:00:00 发布

阅读量5.7k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42340514/article/details/92391781

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>前端分页</title>
   <link rel="stylesheet" href="src/jquery.page.css">
</head>
<style>
   .first, .last{width: 60px}
   ul{
      padding: 0;
   }
   .pagingUl li a{
      border: 1px solid #dddee1;
      color: #000;
   }
   .header li,.main li{
      list-style-type: none;
      line-height: 30px;
      border-bottom: 1px solid #dddee1;
      padding: 8px;
      width: 480px;
   }
   li span{
      display: inline-block;
      width: 150px;
      text-align: center;
   }
   .main li:nth-of-type(odd){
      background:#f8f8f8;
   }
</style>
<body>

   <ul class="main" style="margin: 0  0 20px 0">
   </ul>
   <div id="page"></div>
   <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
   <script type="text/javascript" src="src/jquery.page.js"></script>
   <script type="text/javascript">
      data=[{num:1,name:'安徽',value:199},{num:2,name:'湖北',value:19},{num:3,name:'广东',value:99},{num:4,name:'北京',value:109},{num:5,name:'安徽',value:199},{num:6,name:'湖北',value:19},{num:7,name:'广东',value:99},{num:8,name:'北京',value:109},]
      var result = [];
      var pagecount=1//默认第一页
      //将获取到的所有数据进行具体分页
      for(var i=0,len=data.length;i<len;i+=4){
         result.push(data.slice(i,i+4));
      }
      console.log(result)
      $(function(){
         //处理首页的数据
         if(pagecount==1){
            var dataFirst=result[0]
            var html=''
            for(var i=0; i<dataFirst.length; i++){
               html+='<li class="code"><span class="num">'+dataFirst[i].num+'</span><span class="name">'+dataFirst[i].name+'</span><span class="value">'+dataFirst[i].value+'%</span></li>'
            }
            $(".main").append(html);
         }
         $("#page").Page({
          totalPages:2,//分页总数
          liNums: 3,//分页的数字按钮数(建议取奇数)
          activeClass: 'activP', //active 类样式定义
          callBack : function(page){
           console.log(page)
           pagecount=page
           var arr=result[page-1]
           console.log(arr)
               $(".main").empty()
                var html=''
               for(var i=0; i<arr.length; i++){
                  html+='<li class="code"><span class="num">'+arr[i].num+'</span><span class="name">'+arr[i].name+'</span><span class="value">'+arr[i].value+'%</span></li>'
               }
           $(".main").append(html);
          }
      });
      })
   </script>
</body>
</html>

//jquery.page.js

/* 
*page plugin 1.0   2016-09-29 by cary
*/
(function ($) {
  //默认参数
  var defaults = {
    totalPages: 9,//总页数
    liNums: 9,//分页的数字按钮数(建议取奇数)
    activeClass: 'active' ,//active类
    firstPage: '首页',//首页按钮名称
    lastPage: '末页',//末页按钮名称
    prv: '«',//前一页按钮名称
    next: '»',//后一页按钮名称
    hasFirstPage: true,//是否有首页按钮
    hasLastPage: true,//是否有末页按钮
    hasPrv: true,//是否有前一页按钮
    hasNext: true,//是否有后一页按钮
    callBack : function(page){
        //回掉，page选中页数
    }
  };

  //插件名称
  $.fn.Page = function (options) {
    //覆盖默认参数
    var opts = $.extend(defaults, options);
    //主函数
    return this.each(function () {
      var obj = $(this);
      var l = opts.totalPages;
      var n = opts.liNums;
      var active = opts.activeClass;
      var str = '';
      var str1 = '<li><a href="javascript:" class="'+ active +'">1</a></li>';
      if (l > 1&&l < n+1) {
        for (i = 2; i < l + 1; i++) {
          str += '<li><a href="javascript:">' + i + '</a></li>';
        }
      }else if(l > n){
        for (i = 2; i < n + 1; i++) {
          str += '<li><a href="javascript:">' + i + '</a></li>';
        }
      }
      var dataHtml = '';
      if(opts.hasNext){
          dataHtml += '<div class="next fr">' + opts.next + '</div>';
      }
      if(opts.hasLastPage){
          dataHtml += '<div class="last fr">' + opts.lastPage + '</div>';
      }
          dataHtml += '<ul class="pagingUl">' + str1 + str + '</ul>';
      if(opts.hasFirstPage){
          dataHtml += '<div class="first fr">' + opts.firstPage + '</div>';
      }
      if(opts.hasPrv){
          dataHtml += '<div class="prv fr">' + opts.prv + '</div>';
      }
      
      obj.html(dataHtml).off("click");//防止插件重复调用时，重复绑定事件
      
      obj.on('click', '.next', function () {
        var pageshow = parseInt($('.' + active).html());
        var nums,flag;
        var a = n % 2;
        if(a == 0){
          //偶数
          nums = n;
          flag = true;
        }else if(a == 1){
          //奇数
          nums = (n+1);
          flag = false;
        }
        if(pageshow >= l) {
          return;
        }else if(pageshow > 0&&pageshow <= nums/2){
          //最前几项
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
        }else if((pageshow > l-nums/2&&pageshow < l&&flag==false)||(pageshow > l-nums/2-1&&pageshow < l&&flag==true)){
          //最后几项
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
        }else{
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
          fpageShow(pageshow+1);
        }
        opts.callBack(pageshow+1);
      });
      obj.on('click', '.prv', function () {
        var pageshow = parseInt($('.' + active).html());
        var nums = odevity(n);
        if (pageshow <= 1) {
            return;
        }else if((pageshow > 1&&pageshow <= nums/2)||(pageshow > l-nums/2&&pageshow < l+1)){
          //最前几项或最后几项
          $('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
        }else {
          $('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
          fpageShow(pageshow-1);
        }
        opts.callBack(pageshow-1);
      });

      obj.on('click', '.first', function(){
        var activepage = parseInt($('.' + active).html());
        if (activepage <= 1){
          return
        }//当前第一页
        opts.callBack(1);
        fpagePrv(0);
      });
      obj.on('click', '.last', function(){
        var activepage = parseInt($('.' + active).html());
        if (activepage >= l){
          return;
        }//当前最后一页
        opts.callBack(l);
        if(l>n){
          fpageNext(n-1);
        }else{
          fpageNext(l-1);
        }
      });

      obj.on('click', 'li', function(){
        var $this = $(this);
        var pageshow = parseInt($this.find('a').html());
        var nums = odevity(n);
        opts.callBack(pageshow);
        if(l>n){
          if(pageshow > l-nums/2&&pageshow < l+1){
            //最后几项
            fpageNext((n-1)-(l-pageshow));
          }else if(pageshow > 0&&pageshow < nums/2){
            //最前几项
            fpagePrv(pageshow-1);
          }else{
            fpageShow(pageshow);
          }
        }else{
          $('.' + active).removeClass(active);
          $this.find('a').addClass(active);
        }
      });

          //重新渲染结构
        /*activePage 当前项*/
        function fpageShow(activePage){
          var nums = odevity(n);
          var pageStart = activePage - (nums/2-1);
          var str1 = '';
          for(i=0;i<n;i++){
            str1 += '<li><a href="javascript:" class="">' + (pageStart+i) + '</a></li>'
          }
          obj.find('ul').html(str1);
          obj.find('ul li').eq(nums/2-1).find('a').addClass(active);
        }
        /*index 选中项索引*/
        function fpagePrv(index){
          var str1 = '';
          if(l>n-1){
            for(i=0;i<n;i++){
              str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
            }
          }else{
            for(i=0;i<l;i++){
              str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
            }
          }
          obj.find('ul').html(str1);
          obj.find('ul li').eq(index).find('a').addClass(active);
        }
        /*index 选中项索引*/
        function fpageNext(index){
          var str1 = '';
          if(l>n-1){
            for(i=l-(n-1);i<l+1;i++){
              str1 += '<li><a href="javascript:" class="">' + i + '</a></li>'
            }
           obj.find('ul').html(str1);
           obj.find('ul li').eq(index).find('a').addClass(active);
          }else{
            for(i=0;i<l;i++){
              str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
            }
           obj.find('ul').html(str1);
           obj.find('ul li').eq(index).find('a').addClass(active);
          }
        }
        //判断liNums的奇偶性
        function odevity(n){
          var a = n % 2;
          if(a == 0){
            //偶数
            return n;
          }else if(a == 1){
            //奇数
            return (n+1);
          }
        }
    });
  }
})(jQuery);

//jquery.page.css

@charset "utf-8";
/*样式参考*/
a {
    text-decoration: none;
}

#page {
    height: 50px;
    display: table;

}

.page {
    text-align: center;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.pagingUl {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 30px;
}

.pagingUl li {
    float: left;
    width: 30px;
    height: 30px;
    background: #fff;
    text-align: center;
    margin-right: 5px;
    border-radius: 5px
}

.pagingUl li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    color: #666;
    font-size: 12px;
    border-radius: 5px
}

.prv,
.next {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
}

.prv {
    margin-right: 10px;
}

.first,
.last {
    width: 30px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    /*border: 1px solid #ddd;*/
    cursor: pointer;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    margin-right: 10px;
}

.prv:hover,
.next:hover,
.first:hover,
.last:hover,
.pagingUl li a:hover,
.activP {
    background-color:#deeffa!important;
    color: #0098e1!important;
}

格格巫仙女

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
10
评论
后台返回所有数据，前端处理分页

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>前端分页</title> <link rel="stylesheet" href="src/jquery.page.css"></head>...
复制链接

扫一扫