孤芳自赏的花 - 孤芳自赏,傲然自爱
欢迎光临:孤芳自赏的花 - 孤芳自赏,傲然自爱
更多>> 博客
js分页的一些思考(转载)
来源:孤芳自赏的花    发表于:2017-04-12 10:17:22    访问量:303018
地址:http://www.cnblogs.com/HDou/p/4775873.html

一两年之前在写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  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 +=  ""+pageArr[i]+"";
        }
        $(".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方法动态添加事件。

 

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


(编辑:孤芳自赏的花)
1632条/每页10条/共164页   12345下5页下一页尾页
#1632 2022-10-04 23:37:14
На сайте &lt;a href=https://joycassino.pro/&gt;https://joycassino.pro/&lt;/a&gt; ознакомьтесь с информацией, которая касается популярного казино Джойказино. В данны...
#1631 2022-10-04 21:21:46
https://topnews-ru.ru/2022/09/12/poleznye-sovety-dlya-vladelcev-avtomobilya/ https://region-ural.ru/nyuansy-remonta-plastinchatyh-teploobmennikov/ https://otomkak.ru/karkasnye-do...
#1630 2022-10-04 20:19:42
Капюшон утепленный с притачной подкладкой &lt;a href=https://ratnik.su/product-category/formennaya-i-specialnaya-odezhda/formennaya-odezhda&gt;форма охранника &lt;/a&am...
#1629 2022-10-04 19:48:28
Оснащение юридической конторы ограничивается мебелью, оргтехникой и канцтоварами &lt;a href=https://oookadastr23.ru/uslugi/zhilishhnoe-pravo/uzakonivanie-samovolnyh-postroek/&a...
#1628 2022-10-04 19:46:18
https://earth-chronicles.ru/news/2022-09-10-165315 http://novosibirsk-news.net/other/2022/09/07/200643.html https://www.smolnews.ru/news/670332 http://novosibirsk-news.net/other...
#1627 2022-10-04 19:31:54
Но… я закончила институт, стала врачом, родила замечательную дочь, которая теперь продолжает мое дело, дело всей моей жизни – лечение псориаза травами; методом, не имеющим аналогов...
#1626 2022-10-04 18:44:15
&lt;a href=https://omgo.io&gt;mailer&lt;/a&gt;^from_url=/index.php/message/message_list^message_name=webshell^message_email=yourmail@gmail.com
#1625 2022-10-04 18:12:52
http://samara-news.net/other/2022/09/03/287690.html https://otomkak.ru/effektivnoe-lechenie-vypadeniya-volos/ https://vesti42.ru/reklama/sovety-kotorye-pomogut-ostanovit-oblyseni...
#1624 2022-10-04 17:56:01
Мы можем с уверенностью утверждать, что в России существует не более 5 аналогичных производств, способных обеспечить масштабные поставки товаров и услуг сравнимого уровня &lt;a...
#1623 2022-10-04 17:45:11
С более детальным описанием каждого аккаунта можно ознакомиться в разделе «Типы счетов». Примечательно, что ни в одном из счетов не указана минимальная сумма депозита. С какими сум...
1632条/每页10条/共164页   12345下5页下一页尾页
评论内容
* 请输入内容
昵称 * 请输入昵称
邮箱 * 请输入邮箱
是否公开
验证码 * 请输入验证码