原生js分页

菁菁589

已于 2022-12-14 15:46:34 修改

阅读量112

点赞数

文章标签： css html javascript

于 2022-12-14 15:39:11 首次发布

本文链接：https://blog.csdn.net/weixin_63572203/article/details/128317382

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               padding: 0;
               margin: 0;
               font-size: 20px;
           }

           .all {
               width: 100%;
               height: 100vh;
               display: flex;
               justify-content: center;
               flex-wrap: wrap;
           }

           /*偷懒才用的id*/
           #inputs input {
               width: 100px;
               height: 50px;
               background-color: white;
           }

           #table {
               width: 90%;
           }

           tr {
               width: 100%;
           }

           td {
               text-align: center;
               width: 50%;
               height: 10vh;
               border: 1px solid black;
           }
           #inputs{
               display: flex;
           }
           #inputs li{
               display: flex;
               border: 1px solid #000000;
               align-items: center;
               justify-content:center;
               width: 35px;
               height: 35px;
               margin: 10px;
           }

       </style>
   </head>
   <body>
       <div>
           <div id="table">

           </div>
           <ul id="inputs">

           </ul>
       </div>

       <script type="text/javascript">
           let sumber = ''
           var strs = [
               {
                   "id": 1,
                   "pwd": 1
               },
               {
                   "id": 2,
                   "pwd": 2
               },
               {
                   "id": 3,
                   "pwd": 3
               },
               {
                   "id": 4,
                   "pwd": 4
               },
               {
                   "id": 5,
                   "pwd": 5
               },
               {
                   "id": 6,
                   "pwd": 6
               },
               {
                   "id": 7,
                   "pwd": 7
               },
               {
                   "id": 8,
                   "pwd": 8
               },
               {
                   "id": 9,
                   "pwd": 9
               },
               {
                   "id": 10,
                   "pwd": 10
               },
               {
                   "id": 11,
                   "pwd": 11
               },
               {
                   "id": 12,
                   "pwd": 12
               },

];

var len = 3;//假设规定每页显示长度为3

           //确认该集合会被分成几页，分成几页就代表需要几个页面按钮,封装封装方便多次运用
           function limits() {
               var countLim = Math.ceil(strs.length / len); //余数也算是一页，这里用向上取整
               //确认页面按钮个数，进行循环显示到页面上
               document.getElementById("inputs").innerHTML = ''; //清空一下
               for (var i = 1; i <= countLim; i++) {
                   if(i===1){
                       document.getElementById("inputs").innerHTML += `<li><a id='previousPage' οnclick="get1()"><</a></li><li><a οnclick="getadd(${i})">${i}</a></li>`
                   }else if(i===countLim){
                       document.getElementById("inputs").innerHTML += `<li><a οnclick="getadd(${i})">${i}</a></li><li><a id='previousPage' οnclick="get2(${countLim})">></a></li>`
                   }else{
                       document.getElementById("inputs").innerHTML += `<li><a οnclick="getadd(${i})">${i}</a></li>`; //每个页面按钮都绑定上一个点击事件
                   }

               }

           }
           //点击页签事件
           function getadd(val){
               tablestr(val)
               liminputcolor(val)
           }
           //点击向左箭头
           function get1(){
               if(sumber>1){
                   let b = sumber-1
                   tablestr(b)
                   liminputcolor(b)
               }else{
                   tablestr(1)
                   liminputcolor(1)
               }

           }
           点击向右箭头
           function get2(val){
               if(sumber<val){
                   let b = sumber+1
                   tablestr(b)
                   liminputcolor(b)
               }else if(sumber === val){
                   tablestr(sumber)
                   liminputcolor(sumber)
               }
           }

           var choose = 0; //创建一个全局变量用来保存当前处于第几个页面

           //点击按钮获取当前按钮的值进行选择当前table是第几页数据
           function limitinput(ids) {
               choose = ids.value;
               tablestr(choose); //刷新table数据
               limits(); //刷新页面按钮
               ids.style.backgroundColor = 'red'; //当前点击的页面按钮背景颜色改变为红色
               liminputcolor(choose); //页面按钮变色

}

           //通过当前页面按钮和页面数据长度将数据放进table内，封装封装！！！必须封装
           function tablestr(num) { //num是指当前哪个页面
               sumber = num
               var num1 = (num - 1) * len; //确定循环开始的集合下标
               var num2 = num * len - 1; //确定循环结束的结束下标
               document.getElementById("table").innerHTML = ''; //清空一下

               for (var i = num1; i<=num2;i++){
                   var str = '';
                   for (var h in strs[i]){ //遍历集合
                       str = `
                           <div>${strs[i]['pwd']}</div>
                       `;
                   }
                   document.getElementById("table").innerHTML += str;//每循环一次添加一条数据
               }
           }

           //设置当前选中的页签颜色样式
           function liminputcolor(choose) {
               let dom=document.getElementById("inputs").childNodes;
               for(let item of dom){
                   item.style.backgroundColor = "";
               }
               document.getElementById("inputs").childNodes[choose].style.backgroundColor = "red";

}

           //初始化，当前页面显示为第一页
           limits(); //页面按钮生成
           document.getElementById("inputs").childNodes[1].style.backgroundColor = "red"; //第一个按钮的背景颜色为红色
           tablestr(1); //table数据显示
       </script>
   </body>
</html>