• js分页--存储数据并进行分页


      //分页方法
               var page = function(){
                   this.v = {
                       o:null,//ul父级层
                       home:null,
                       previous:null,
                       next:null,
                       last:null,   
                       list:[],
                       pageSize:10,
                       pageIndex:0,
                       pageCount:0,
                       rowCount:0
                  };
                  this.init = function(){
                     var _this = this;
                     _this.v.o.find("li").each(function(i,o){
                        _this.v.list.push($(o).html());
                     });
                     
                     _this.v.rowCount = _this.v.list.length;
                     _this.v.pageCount =  parseInt((_this.v.rowCount + _this.v.pageSize - 1)/_this.v.pageSize);
                     _this.process(0);
                     
                     _this.addcolor([_this.v.home,_this.v.previous]);
                     
                     //首页
                     _this.v.home.click(function(){
                         _this.v.pageIndex = 0;
                         _this.process(_this.v.pageIndex);
                         _this.addcolor([_this.v.home,_this.v.previous]);
                         _this.removecolor([_this.v.next,_this.v.last]);
                            
                     });
                     //上一页
                     _this.v.previous.click(function(){
                         if(_this.v.pageIndex > 0){
                           _this.process(--_this.v.pageIndex);
                           
                           if(_this.v.pageIndex == 0)
                               _this.addcolor([_this.v.home,_this.v.previous]);
                               
                           _this.removecolor([_this.v.next,_this.v.last]);   
                         }
                     });
                     //下一页
                     _this.v.next.click(function(){
                        if(_this.v.pageIndex < _this.v.pageCount-1){
                          _this.process(++_this.v.pageIndex);
                          
                          if(_this.v.pageIndex == _this.v.pageCount-1)
                               _this.addcolor([_this.v.next,_this.v.last]);
                               
                            _this.removecolor([_this.v.home,_this.v.previous]);   
                        }
                     });
                     //尾页
                     _this.v.last.click(function(){
                         _this.v.pageIndex = _this.v.pageCount-1;
                         _this.process(_this.v.pageIndex);
                         
                         _this.addcolor([_this.v.next,_this.v.last]);
                         _this.removecolor([_this.v.home,_this.v.previous]);
                     });
                   };
                   this.process = function(n){
                      var _this = this;
                      _this.v.o.find("ul").empty(); 
                      for(var i=(n*_this.v.pageSize);i<_this.v.rowCount;i++){
                        if(i > 0 && i % (_this.v.pageSize*(n+1)) == 0){
                            break;
                        }   
                        _this.v.o.find("ul").append("<li>"+_this.v.list[i]+"</li>");
                     }
                   }
                   this.addcolor = function(ac){
                     for(var j=0;j<ac.length;j++)
                        ac[j].addClass("page_disabled");
                   }
                   this.removecolor = function(rc){
                     for(var j=0;j<rc.length;j++)
                        rc[j].removeClass("page_disabled");   
                   }
               };    
                   
               (function(){
                    //初始化按钮
                    var p1 = new page();
                    p1.v.o = $("#marquees1");
                    p1.v.home = $("#zb1");
                    p1.v.previous = $("#zb2");
                    p1.v.next = $("#zb3");
                    p1.v.last = $("#zb4");
                    p1.init();
                    }
    )
  • 相关阅读:
    【搜索】棋盘 luogu-3956
    【动态规划】石子合并 luogu-1880
    【动态规划】合唱队形 luogu-
    【模拟】报名签到 luogu-4445
    【排序+贪心】导弹拦截 luogu-1158
    【模拟】不高兴的津津
    【模拟】选数 luogu-1037
    「JOISC2020」建筑装饰 4
    「清华集训」小 Y 和恐怖的奴隶主
    「CF708E」Student's Camp
  • 原文地址:https://www.cnblogs.com/elves/p/3612855.html
Copyright © 2020-2023  润新知