JQ原生实现分页

近期对公司网站进行修改，新增需求：知识库模块。其中涉及到一个小功能分页，为了提高自己的代码自编写力，决定原生编写。此次功能使用Jq操作dom的方式去完成编码，代码实现的有点小鸡肋，也基本到达了需求的效果。

Html部分

 <ul id="Article">
 </ul>
<div class="page">
   <span class="pre" style="display: none;"><</span>
    <p class="pagesize">
     <!-- 动态渲染按钮 -->
    </p>
    <span class="next">></span>
</div>

Javascript部分

/*
 * id 标识
  * title 标题
  * time 时间
  * tag 标签
  * img 图片
  * describe 描述
  * href 链接地址
  */
  let arr = [{
            id: 1,
            title: '大屏不会做很迷茫，3分钟为您指路引航',
            time: '2020/07/29',
            tag: '可视化大屏',
            img: 'img/jslt/tu1.png',
            href: 'ArticleNO2.html',
            describe: '大屏首先是要服务于 […]'
        }];


// 默认显示页数
const pageSize = 3;
// 一页显示*条
const pageLength = 3;
// 数组动态划分页数总数（总页数）
let pageNum = 0;
//新数组存放
let newList = [];
// 记录当前页
let current = 1;

随机文章数组

这里暂时使用random函数对数组进行微处理，等接口对接后进行更改。

   for (var i = 0; i < 10; i++) {
   	 let rand = Math.floor(Math.random()*5);
     arr.push(arr[rand]);
   }

文章渲染

默认渲染第一页的内容，使用slice对总文章数组进行分割，减缓浏览器压力，减少渲染。

function draw(list) {
    var html = list.map((item) => {
         let value;
         //对无图片进行处理
         if (item.img) {
             value = `<img src="${item.img}" />`;
         } else {
             value = `<span class="date">${item.time}</span>`;
         }
         return `<li>
             <a href="${item.href}" title="${item.title}">
                 <div class="tu">${value}</div>
                 <p class="tiaoti">${item.title}</p>
                 <p class="time">发布时间：${item.time} Tag：${item.tag}</p>
                 <p class="cont">${item.describe}</p>
             </a>
         </li>`
     }).join('');
	//更新dom
     document.querySelector('#Article').innerHTML = html;
 }
 //渲染第一页
 draw(arr.slice(0, pageLength));

按钮渲染

根据数组长度处理，pageLength为一页显示的条数，pageNum为总页数，pageSize为按钮的数量。

 // 渲染btn
 function drawbtn() {
     var html = '';
     //计算出总页数
     pageNum = Math.round((arr.length + 1) / pageLength);
     for (let i = 1; i <= pageNum; i++) {
     	//控制按钮数量
         if (i > pageSize) break;
         i == 1 ? html += `<span class="pageBtn pageLight">${i}</span>` : html += `<span class="pageBtn">${i}</span>`;
     }
     document.querySelector('.pagesize').innerHTML = html;
 }
 drawbtn();

绑定事件

对不同的按钮事件进行绑定，按钮点击高亮类赋值。
当前按钮的值*页显示数-页显示数量 = 文章数组的开始截取位置

// 单点数字页面
 $('.page .pageBtn').each(function() {
      let index = $(this).text();
      $(this).click(() => {
          // 记录数组位置
          let end = index * pageLength;
          current = index;
          newList = arr.slice(end - pageLength, end);
          // 高亮显示
          $(this).addClass('pageLight').siblings().removeClass('pageLight');
          //前进后退按钮的显示
          if (current != 1) $('.pre').css('display', 'block');
          if (current != pageNum) $('.next').css('display', 'block');
          //点击渲染文章列表
          draw(newList);
      })
  });

  // 上一页
  $('.pre').click(function() {
      current--;
      var first = $('.pageBtn:first-child').text();
      if (first > 1) {
          $('.pageBtn').each(function() {
              var num = $(this).text();
              $(this).text(--num);
          });
          current++;
      }
      // 高亮显示
      $(`.pageBtn:nth-child(${current})`).addClass('pageLight').siblings().removeClass('pageLight');
      // 高亮页文本
      var currentNum = $(`.pageBtn:nth-child(${current})`).text();
      // 边界判断 当前值等于1隐藏按钮
      if (currentNum == 1) {
          $(this).css('display', 'none');
      } else {
          $('.next').css('display', 'block');
      }
      // 文章列表渲染  
      draw(arr.slice((currentNum * pageLength) - pageLength, currentNum * pageLength));


  })

  // 下一页
  $('.next').click(function() {
      current++;
      var last = $('.pageBtn:last-child').text();
      if (last < pageNum) {
          $('.pageBtn').each(function() {
              var num = $(this).text();
              $(this).text(++num);
          });
          current--;
      }
      // 高亮显示
      $(`.pageBtn:nth-child(${current})`).addClass('pageLight').siblings().removeClass('pageLight');
      // 高亮页文本
      var currentNum = $(`.pageBtn:nth-child(${current})`).text();
      // 当前值等于最后一页
      if (currentNum == pageNum) {
          $(this).css('display', 'none');
      } else {
          $('.pre').css('display', 'block');
      }
      //  文章列表渲染
      draw(arr.slice((currentNum * pageLength) - pageLength, currentNum * pageLength));
  })

此笔记仅仅为了记录自己在项目中所学到的知识，如果有问题，可以提出，我们可以共同探讨。