2021-01-09 JavaScript前端分页案例

嘿嘿嘿，鸽鸽鸽了好几天了，之前想着要挑战每天写一篇博文分享的，结果虽然一天不落，但也从一开始的分享变成应付了事的，发了好多都是面试题纯概念什么的。

所以，以后只会多多给大家分享有价值的文章，不再水文章了。。。

正文开始

今天依然是一个小案例，前端分页
其实，前端分页我们只是在前期学习的，因为分页不是前端来做的，前端只是负责显示，前端主要做的把要显示的第几页，一页要显示多少条数据，传给后台就好了，数据的获取是后端的事情，后端把数据全部返回给前端，前端根据这个数据做布局和显示就好了。

后端分页我们以后再讲，今天先说说模拟几条数据来做这个分页。

实现效果如下：有点简陋莫怪~

下面依然是代码解释

HTML代码：大家按顺序对比页面吧

   <div id="pageNum">			<!--上面的1,2，3,4，5 这里是根据数据动态生成的-->
        <button>1</button>
        <button>1</button>        
    </div>
    <button onclick="first()">首页</button>	<!--下面的几个按钮，看名字就知道是干什么的-->
    <button onclick="prev()">上一页</button>
    <button onclick="next()">下一页</button>
    <button onclick="last()">末页</button>

    <ul id="ul">		<!--这是是数据展示页面，我这里数据是每页显示两条-->
       
    </ul>
    <p>			<!--这里是对应数据统计的总共页数和当前多少页-->
       共： <span id="pageSum"></span> 页 
       当前：<span id="page"></span>页

    </p>

JavaScript代码：

<script>
         var arr=[		//默认数据，数组格式
            "aa","bb",
            "cc","dd",
            "ee","ff",
            "gg","hh",
            "ii"
        ];
        var page =1 ; //页数
        var limit =2; //每页显示条数

        function prev(){		//上面HTML给上一页按钮添加了一个单击点击事件，点击这个按钮进入此函数
            if(page >1){	//判断当页数大于1时，页数-1
                page-=1;
                var nowArr= arr.slice( (page-1)*limit ,page*limit )//定义变量盛放当前页面的数据，下面解释这一句
                console.log(nowArr)//控制台打印数据
                 showLi(nowArr);//页面上渲染当前页的数据，渲染页数，这里是调用函数
                 nowPage(page);
            }else{		//否则就是页数为1，提示这是首页
                alert("这是首页")
            }
           
        }

        function next(){		//按钮下一页，除了判断条件外都与上一页相同
            if( page <  Math.ceil( arr.length / limit ) ){	//判断页数小于总页数时，页数增加+1，这句下面解释
                page +=1;
                var nowArr= arr.slice( (page-1)*limit,page*limit );
                console.log(nowArr);
                 showLi(nowArr);
                 nowPage(page);
            }else{
                alert("这是最后一页");
            }
        }
    
        function first(){		//点击首页，页数为1，渲染页面
            page= 1;
            var nowArr= arr.slice( (page-1)*limit,page*limit );
                showLi(nowArr);
                nowPage(page);

        }

        function last(){		//点击末页，页数为1，渲染页面
            page= Math.ceil( arr.length /limit );
            var nowArr= arr.slice( (page-1)*limit,page*limit );
                showLi(nowArr);
                nowPage(page);

        }

        window.onload=function(){	//onload 当页面加载时显示的页面，默认第一页
            var nowArr= arr.slice((page-1)*limit,page*limit);
            console.log(nowArr);
            showLi(nowArr);
            nowPage(page);
			//这是页面最上面的button按钮
            var sum= Math.ceil( arr.length /limit );  //定义变量获取所有的页数，有几页就有几个button按钮
            var str=""		//定义一个空变量，在下面遍历完页数后，+=把页数对应的数字赋值给button按钮，同时创建对应的button按钮
            for(var i=1;i<= sum ;i++){
                str+=`
                 <button οnclick="numPage(${i})">${i}</button>
                `
            }
        document.getElementById("pageNum").innerHTML=str;	//这里通过Id获取页面的节点，把str的值渲染到页面上
        }
        //点 数字 1 2 3 页
        function numPage(i){		//上面我们渲染了数字按钮，这里给它们对应的页面数据
            page= i;	//页面直接对应上面传的i的值，就是我们的按钮对应的数字
            var nowArr= arr.slice((page-1)*limit,page*limit);//渲染对应页面
            showLi(nowArr);
            nowPage(page);

        }


        function showLi(arr){	//这里是上面调用很多次的页面渲染，渲染步骤和上面按钮相同，遍历数组，创建对应的li，然后渲染到页面上数据展示区
            var str="";
            for(var i=0;i<arr.length;i++){
                str+=`
                    <li>${arr[i]}</li>
                `
            }
            document.getElementById("ul").innerHTML=str;
        }
    
		 //当前第几页
        function nowPage(page){		//上面调用很多次的显示页面，在下面总计里显示
            document.getElementById("page").innerText=page;
        }
        
        function pageSum(){		//页面总数，这里使用return直接返回值
            return Math.ceil( arr.length / limit );
        }
       

		 document.getElementById("pageSum").innerText=pageSum();//渲染总数到页面，在下面总计里显示
    </script>

上面的代码有点乱，但是自认为还是写的很详细的，有很多重复可以封装的地方也单独写出来了，下面这两个语句再解释一下

arr.slice( (page-1)*limit ,page*limit )
//         页数-1*每页条数，页数*每页条数

这句使用的是数组的slice方法，slice剪切[start，end），包头不包尾，我们通过获取下标来剪切数据展示页面

<body>
    <button onclick="fn(1)">1</button>
    <button onclick="fn(2)">2</button>
    <button onclick="fn(3)">3</button>
    <button onclick="fn(4)">4</button>


    <script>
        var arr=[
            "aa","bb",
            "cc","dd",
            "ee","ff",
            "gg","hh"
        ]
       var  limit =2;
      function fn(page){
        console.log( arr.slice( (page-1)*limit  , page *limit )  )
        			//           页数-1*每页条数，页数*每页条数
      }



        //      page 页数    limit 每页显示条数
        //  1   -- 0 (page-1) *limit   -- 2 page *limt
        //  2   -- 2 -- 4
        //  3   -- 4 -- 6
    
        // console.log( arr.slice(0,2) )
        // console.log( arr.slice(2,4) )
        // console.log( arr.slice(4,6) )
        // console.log( arr.slice(6,8) )
        
    </script>
</body>

我们可以看到上面这些代码测试了几页的数据，找到了这个规律，就变成了上面的公式啦，我们在显示页面时直接使用就可以了，limit可以换成其他数字，=3，=4就是每页显示3条4条数据了

 Math.ceil( arr.length / limit )
 //向上取整（数组长度/每页条数）

这里是计算页面的总数的，数组长度/每页条数就是总数，主要的是要加上向上取整，因为我们的数据很可能不是正好每页显示完全的，比如有7条数据，每页显示两条，如果不使用向上取整，就会出错。
使用Math.ceil（）有不足条数的页面也会正常显示。

好了，今天就到这里了，纸上得来终觉浅，绝知此事要躬行