首页 > 编程语言 >javascript 自定义分页组件

javascript 自定义分页组件

时间:2023-11-17 17:47:48浏览次数:40  
标签:function pageIndex 自定义 pageHtml javascript totalPage innerHTML let 组件

仿boostrap 前端分页组件的实现

一  写一个前端自定义分页组件,需要考虑以下问题

  /*      需要一个<ul id="pagination"></ul>标签    total; // 总数据的数量    pageSize; // 一页显示数量    pageIndex; // 当前页    */  

二 实现细节

编写html文件   index.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript分页</title>
</head>

<body>
    <div>
        <ul id="pagination"></ul>
    </div>
    <script src="./index.js"></script>
    <script>
        generatePagination(500, 10, 1,'/proudct');
    </script>
</body>

</html>

 

实现生成的js   index.js

function generatePagination(total, pageSize, pageIndex, navUrl) {
  /* 创建style标签并设置style样式 */
  let style = document.createElement('style');
  style.innerHTML =
    '#pagination{width:100%;margin:30px;margin-bottom:0px;position:fixed;left:0;display:flex;padding-left:0;}#pageTips{position:fixed;left:10px;top:100px;font-size:15px;}ul li{list-style:none;display:inline-block;user-select:none;}.list-items{width:36px;height:36px;line-height:36px;text-align:center;background-color:#fff;color:#000;cursor:pointer;transition:all .3s;border:1px solid #dedede;border-right:none;border-radius:0px;}.list-items:hover{background-color:#e9ecef;border-color:#dee2e6;}.active,.active:hover{color:#fff;background-color:#337ab7;border-color:#337ab7;}.lbl{border-radius:5px 0px 0px 5px;color:#337ab7;border:1px solid #dedede;}.lbr{border-radius:0px 5px 5px 0px;color:#337ab7;border:1px solid #dedede;border-left:none}';
  document.getElementsByTagName('head').item(0).appendChild(style);

  /*  
   需要一个<ul id="pagination"></ul>标签
   total; // 总数据的数量
   pageSize; // 一页显示数量
   pageIndex; // 当前页 
  */
  let totalPage = Math.ceil(total / pageSize); // 总页数
  function initPagination() {
    let pagination = document.querySelector('#pagination');
    let pageHtml; // 按钮内容
    let prevButton = `<li class='list-items lbl' id='btnPrev'>‹</li>`; // 向左
    let nextButton = `<li class='list-items lbr' id='btnNext'>›</li>`; // 向右
    let firstPage = `<li class='list-items' pagenumber=1>1</li>`; // 第一页
    let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`; // 最后一页
    let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>`; // 省略号
    let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>`; // 省略号
    let pageTips = `<div style='line-height:20px;margin-left:30px' id='pageTips'>${pageIndex} - ${totalPage} of ${total} items</div > `;
    pageHtml = prevButton; // 添加向左的按钮

    /* 生成页数 */
    if (totalPage <= 6) {
      // 总页数小于等于10页全部显示
      for (let i = 1; i <= totalPage; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
    }

    //页码大于5页的情况  当前页大于5的话,并且页码是大于11页的
    else if (pageIndex <= 4) {
      //总页数大于10且当前页远离总页数
      for (let i = 1; i <= 5; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
      pageHtml += rightOmitPage;
      pageHtml += lastPage;
    } else if (pageIndex > totalPage - 3) {
      //pageindex>=9 的时候并且页数》10页的时候

      console.log('totalPage - 2:' + (totalPage - 3));
      console.log('pageindex:' + pageIndex);
      //总页数大于10且当前页接近总页数
      pageHtml += firstPage;
      pageHtml += leftOmitPage;
      for (let i = totalPage - 4; i <= totalPage; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
    } else {
      //除开上面两个情况 当前页在中间
      pageHtml += firstPage;
      pageHtml += leftOmitPage;
      for (let i = pageIndex - 1; i <= pageIndex + 1; i++) {
        pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
      }
      pageHtml += rightOmitPage;
      pageHtml += lastPage;
    }
    pageHtml += nextButton; // 添加向右的按钮
    pageHtml += pageTips;
    pagination.innerHTML = pageHtml;
    document
      .querySelector("li[pagenumber='" + pageIndex + "']")
      .classList.add('active');

    let pagenumberBtns = document.querySelectorAll('li[pagenumber]'); // 获取所有的页码按钮

    /* 点击页码按钮进行翻页 */
    pagenumberBtns.forEach(function (elements) {
      elements.onclick = function () {
        pageIndex = Number(this.innerHTML); // 当前页
        document
          .querySelector("li[pagenumber='" + pageIndex + "']")
          .classList.add('active');
        pageHtml.innerHTML = '';
        initPagination();
        console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
      };
    });

    /* 向左翻页 */
    document.getElementById('btnPrev').addEventListener('click', function () {
      if (pageIndex > 1) {
        pageIndex--;
        pageHtml.innerHTML = '';
        initPagination();
      }
    });

    /* 向右翻页 */
    document.getElementById('btnNext').addEventListener('click', function () {
      if (pageIndex < totalPage) {
        pageIndex++;
        pageHtml.innerHTML = '';
        initPagination();
      }
    });

    /* 向左快速翻页 */
    let btnGoLeft = document.getElementById('btnGoLeft');
    if (btnGoLeft) {
      btnGoLeft.addEventListener('mouseenter', function () {
        this.innerHTML = '<';
      });
      btnGoLeft.addEventListener('mouseleave', function () {
        this.innerHTML = '...';
      });
      btnGoLeft.addEventListener('click', function () {
        if (pageIndex > 10) {
          pageIndex -= 10;
          pageHtml.innerHTML = '';
          initPagination();
          console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
        }
      });
    }

    /* 向右快速翻页 */
    let btnGoRight = document.getElementById('btnGoRight');
    if (btnGoRight) {
      btnGoRight.addEventListener('mouseenter', function () {
        this.innerHTML = '>';
      });
      btnGoRight.addEventListener('mouseleave', function () {
        this.innerHTML = '...';
      });
      btnGoRight.addEventListener('click', function () {
        if (pageIndex < totalPage - 10) {
          pageIndex += 10;
          pageHtml.innerHTML = '';
          initPagination();
          console.log(`go to href : ${navUrl}?pageNum=${pageIndex}`);
        }
      });
    }
  }
  initPagination();
}

  

测试生成的效果

测试时,分别需要测试当少于6页,此时全显示

 

大于6页,当前页小于6页的时候,显示后面的跳转按纽

 

大于6+6的时候,并且当前页码数大于总页数减去6的时候,显示前面的跳转按纽

其它的情况就是显示中间的页码加上两边的跳转按纽的情况

 

标签:function,pageIndex,自定义,pageHtml,javascript,totalPage,innerHTML,let,组件
From: https://www.cnblogs.com/freewsf/p/17839346.html

相关文章

  • .net 自定义授权处理程序
    .net自定义授权处理程序Authorization——授权.NET里提供了授权框架,允许开发者编写自己的授权规则,当一个请求到达控制器Action时,用它来判断该请求是否能够继续执行该控制器Action。例如:发表一条评论,需要用户登录后才能发表,那么就使用Authorization来判断该请求是否携带用户登......
  • (javascript)将ztree树结构的数据转成二维数组
    ztree树结构的数据结构如下:[{"id":3990,"name":"泡沫灭火","iconShow":false,"children":[{"id":8616,......
  • Vue 该如何实现组件缓存?
    在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合理的方式组织起来,那么自然会存在组件之前切换的问题,vue中有个动态组件的概念,它能够帮助开发者更好的实现组件之间的切换。但是在面对需求频繁的变化,切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,而......
  • Vue-打印组件
    组件代码:<el-buttonv-print="{id:'print-content'}"icon="el-icon-printer">打印</el-button>//插件vue-print-nb示例: ......
  • vue-富文本/自定义上传图片
    1、下载组件npminstallvue-quill-editor–D2、在需要的组件内引入富文本import{quillEditor}from'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'com......
  • JavaScript之splice()
    参考:https://blog.csdn.net/weixin_45726044/article/details/120151153概述splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。一个参数splice(index)——>从index的位置开始,删除之后的所有元素(包括......
  • vue组件递归
    这样的场景:渲染列表数据的时候,列表的子项还是列表。如果层级少尚且可以用几个for循环搞定,但是层级多或者层级不确定就有点无从下手了。其实这就是树形结构数据,像常见的组织架构图,文件夹目录,导航菜单等都属于这种结构。很多组件库都带有树形组件,但往往样式不是想要的,改起来也非......
  • 新版本 el-input 不支持 v-model.trim,自定义指令去除首尾空格
    问题场景<el-inputtype="textarea"v-model.trim="value"/>多行文本输入框无法换行。经测试,去掉.trim修饰符后,就可正常换行了。从官网文档,发现element-ui新版本不支持v-model修饰符。因此,若在新版本的element-ui的el-input中使用v-model.trim,会发生以下问题......
  • Spring Boot 自定义注解,AOP 切面统一打印出入参请求日志
    今天主要说说如何通过自定义注解的方式,在SpringBoot中来实现AOP切面统一打印出入参日志。小伙伴们可以收藏一波。废话不多说,进入正题!一、先看看切面日志输出效果在看看实现方法之前,我们先看下切面日志输出效果咋样:从上图中可以看到,每个对于每个请求,开始与结束一目了然,并且打印......
  • 02_自定义Springboot starter
     创建springbootstarter 创建一个demostarter  创建配置类@Configuration@EnableConfigurationProperties(EmailProperties.class)@ConditionalOnBean(EmailEnable.class)publicclassEmailAutoConfiguration{static{System.out.println("Em......