zoukankan      html  css  js  c++  java
  • js分页的一些思考

    一两年之前在写java的时候,分页的逻辑是写在后端的,用java去实现,jsp是动态展示页码和数据。但是对于一个用ajax加载的分页数据来说,分页的逻辑必须也在前端完成,那么就不得不去思考一下在js里如何完成分页。

    在开始之前,我们不妨撕思考一下,我们要展示的分页数据是什么样的,因为如果是不同的数据,那我们展示分页的代码应该是不一样的。

    其中就有一种是后端push过来的数据是全部的数据,我们在一个页面不方便展示,从而考虑模拟分页,总之从后端拿过来的是一个数组,我们根据不同的页码取数组中不同的部分。

    其实最好的方案是后端push过来的是单页的数据,根据前端传递的当前页码获取与页码,这里需要注意的是此时,后端必须把数据列表总条数也一并返给前端,因为计算页码的时候必须用到总条数。此时,后端传来的数据应该是长成这样的{total:100,list:[]}

    我们现在就此种情况下的分页分析是实现,下图是效果

    我们先不用管数据的展示,因为我们每次从后端那来的数据里面有一个list,而我们要展示的数据就是这个list,分页的重点是在分页。

    在我们打开页面还没有点击页码的时候,页面应该显示的是第一页的数据。

    所以上来我们就应该请求一次后端,而且传递的参数应该是当前页page = 1

    当前页码应该是根据我们点击页码,或者点击上一下、下一页的时候改变,在这里我们可以把页码定义一个全局变量,初始值为1,其他两个变量是要根据total来计算的,而且很函数里面都需要用到,都给他拎到全局。

    var page = 1; //当前页
    var pageAll = 1;//总页数
    var pageSize = 8;//每页显示条数

    这样我么就可以加载初始数据了,也就是page=1的数据。

    loadData();//初始加载数据
    
    //加载数据方法
        function loadData(){
            $.ajax({
                url:"../adquery",
                type:"get",
                data:{"action":"queryAll","page":page},
                success:function(data){
                    showList(data.rows);//显示数据表格
                    showPage(data.total,page);//显示分页
                }
            });
        }

    加载数据自然是ajax,因为数据的加载,和显示是我们点击页码的时候都会执行的,所以将其放到函数中,以便调用。loadData()函数很好理解,就不过多说,无非就是一个ajax,成功之后需要刷新两个部分的页面内容,1个是页面的数据,还有一个是分页页码。

    我们只关心页码显示部分,所以来看showPage(data.total,page);函数

    //分页方法
        function showPage(total,now){
            var _LENGTH = 5;//最大页数5
            var pageArr = [];//
            
            //整页
            if(total%pageSize==0){
                pageAll = total/pageSize;
            }else{//非整页
                pageAll = (total - total%pageSize)/pageSize + 1;
            }
            
            //总页数小于5页
            if(pageAll<=_LENGTH){
                for(var i = 0 ;i < pageAll; i++){
                    pageArr[i] = i+1;
                }
                
            }else{//总页数大于5页
                if(now+2 <= pageAll&&now-2 > 0){//当前页没有超过总页数
                    for(var i = 0 ;i < _LENGTH; i++){
                        pageArr[i] = now-2 + i;
                    }
                }else if(now<=2){
                        pageArr = [1,2,3,4,5] ;
                }else{
                    for(var i = 0 ;i < _LENGTH; i++){
                        pageArr[i] = pageAll-4+i;
                    }
                }
            }
            //绘制页面
            drawPage(pageArr,now,pageAll);    
        }

    我们这个方法里定义了一个最大页码数,和一个Arr[]数组。其实很理解,Arr[数组的最大长度就是最大页码数5。也就是说,最多只显示5个页码,12345,或者23456。

    在这个函数中,最重要的逻辑是通过计算得到这个pageArr[];  如果的到的数组是[1,2,3]; 那么页码就是显示是1,2,3;如果数组是[5,6,7,8,9];那么的显示的页码就是5,6,7,8,9,当然,在这之前,我们顺便把总页数pageAll计算了出来。

    之后就是在页面中绘制页码了

    //绘制分页dom方法
        function drawPage(pageArr,now,pageAll){
            var _html = "";
            for(var i = 0; i<pageArr.length; i++){
                _html +=  "<a href='javascript:void(0);'>"+pageArr[i]+"</a>";
            }
            $(".pagelist").html(_html);
            
            var index = getIndex(pageArr,now);
            $(".pagelist > a").eq(index).css({"background":"#CCC"});
            
            $(".pagenow").text(now+"/"+pageAll);
            
        }
        
        //获取点击当前页坐标
        function getIndex(pageArr,now){
            var index = 0;
            for (var i = 0 ; i < pageArr.length; i++){
                if(pageArr[i] == now ){
                    index = i;
                }
            }
            return index;
        }

    绘制页码的时候把当前页的css样式修改以显示是当前页码。

    最后还需要给页码添加点击事件

    //点击分页
        $(".zs-page a").live("click",function(){
            var text = $(this).text();//获取当前点击页数
            if(text == "上一页"){ //如果是点击的上一页
                if(page>1){
                    page--;
                }else{
                    //alert("已经是第一页");
                }
            }else if(text == "下一页"){//如果是点击的下一页
                if(page<pageAll){
                    page++;
                }else{
                    //alert("已经是最后一页");
                }
            }else{
              page = parseInt(text);//将获取的页数转化成数字    
            }
            loadData();
        });

    因为页码是动态添加的,所以这里用的是live方法添加的事件,当然新版的jquery支持on方法动态添加事件。

    代码写的是很简洁和明了的,逻辑也很明确,适合的时候你可以去试一试这个方法。

  • 相关阅读:
    Python学习札记(十五) 高级特性1 切片
    LeetCode Longest Substring Without Repeating Characters
    Python学习札记(十四) Function4 递归函数 & Hanoi Tower
    single number和变体
    tusen 刷题
    实验室网站
    leetcode 76. Minimum Window Substring
    leetcode 4. Median of Two Sorted Arrays
    leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions 、434. Number of Islands II(lintcode) 并查集 、178. Graph Valid Tree(lintcode)
    刷题注意事项
  • 原文地址:https://www.cnblogs.com/HDou/p/4775873.html
Copyright © 2011-2022 走看看