1、前言

在前端通过ajax请求数据后，可以通过bootstrap实现分页。由于bootstrap只提供分页的按钮的样式。数据分页我们需要实现页码跳转，上一页下一页，数据过多显示省略号，点击省略号能快速切换到其他页的数据。

2、实现过程

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>分页</title>
  9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  10. </head>
  12. <body>
  13.     <nav aria-label="Page navigation" style="margin-top: 50px;">
  14.         <input type="text" name="pagenumber" value="1" hidden />
  15.         <ul class="pagination"></ul>
  16.     </nav>
  17. </body>
  18. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  19. <script type="text/javascript">
  20.     $(document).ready(function () {
  21.         let total = 1000; // 数据总条数
  22.         let PageIndex = 1;// 当前页
  23.         let PageSize = 10; //一页显示10条
  24.         let pageHtml = $('.pagination'); // 分页栏
  25.         let totalPage = Math.ceil(total / PageSize); // 获取到总页数
  26.         function setPages() {
  27.             let pageBtnPrev = "<li class='page-item btnPrev'><a class='page-link' aria-label='Previous'><span aria-hidden='true'>«</span></a ></li>";
  28.             let pageBtnNext = "<li class='page-item btnNext'><a class='page-link' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";
  29.             let pageTips = "<div style='line-height:38px'>" + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "</div > ";
  30.             pageHtml.append(pageBtnPrev); // 添加左按钮
  31.             // 第一页
  32.             let firstPage = $("<li class='page-item' pagenumber=1><a class='page-link'>1</a ></li> ");
  33.             // 最后一页
  34.             let lastPage = $("<li class='page-item' pagenumber='" + totalPage + "'><a class='page-link'>" + totalPage + "</a ></li>");
  35.             // 左省略号
  36.             let leftOmitPage = $("<li class='page-item' id='leftOmit'><a class='page-link'>...</a></li>");
  37.             // 右省略号
  38.             let rightOmitPage = $("<li class='page-item' id='rightOmit'><a class='page-link'>...</a></li>");
  39.             // 左省略号图标
  40.             let leftOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-left' viewBox='0 0 16 16'>" +
  41.                 "<path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
  42.             // 右省略号图标
  43.             let rightOmitIcon = $("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'>" +
  44.                 "<path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
  46.             // 总页数小于等于9页全部显示
  47.             if (totalPage <= 9) {
  48.                 for (let i = 1; i <= totalPage; i++) {
  49.                     pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
  50.                 }
  52.             } else if (PageIndex <= 8) {  //总页数大于10且当前页远离总页数
  53.                 for (let i = 1; i <= 9; i++) {
  54.                     pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
  55.                 }
  56.                 pageHtml.append(rightOmitPage);
  57.                 pageHtml.append(lastPage);
  58.                 //总页数大于10且当前页接近总页数
  59.             } else if (PageIndex > totalPage - 7) {
  60.                 pageHtml.append(firstPage);
  61.                 pageHtml.append(leftOmitPage);
  62.                 for (let i = totalPage - 8; i <= totalPage; i++) {
  63.                     pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
  64.                 }
  65.                 //除开上面两个情况 当前页在中间
  66.             } else {
  67.                 pageHtml.append(firstPage);
  68.                 pageHtml.append(leftOmitPage);
  69.                 for (let i = PageIndex - 3; i <= PageIndex + 3; i++) {
  70.                     pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));
  71.                 }
  72.                 pageHtml.append(rightOmitPage);
  73.                 pageHtml.append(lastPage);
  74.             }
  76.             $(".pagination li[pagenumber='" + PageIndex + "']").addClass('active');
  77.             pageHtml.append(pageBtnNext); // 添加右按钮
  78.             pageHtml.append(pageTips); // 添加右下角items提示栏
  80.             /* 点击页码按钮进行翻页 */
  81.             $(".pagination li[pagenumber]").on('click', function () { // 页数跳转
  82.                 PageIndex = Number($(this).text()); // 当前页
  83.                 $('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页
  84.                 $(this).siblings('li').removeClass('active');
  85.                 $(this).addClass('active');
  86.                 pageHtml.empty();
  87.                 setPages();
  88.             })
  90.             /* 点击按钮进行翻页 */
  91.             $(".btnPrev").on('click', function () { // 向左翻页
  92.                 if (PageIndex > 1) {
  93.                     PageIndex--;
  94.                     pageHtml.empty();
  95.                     setPages();
  96.                 }
  97.                 $(this).addClass('disabled');
  98.             })
  99.             $(".btnNext").on('click', function () { // 向右翻页
  100.                 if (PageIndex < totalPage) {
  101.                     PageIndex++;
  102.                     pageHtml.empty();
  103.                     setPages();
  104.                 }
  105.                 $(this).addClass('disabled');
  106.             })
  108.             /* 点击左省略号向左翻页 */
  109.             $('#leftOmit').click(function () {
  110.                 if (PageIndex > 10) {
  111.                     PageIndex -= 10;
  112.                     pageHtml.empty();
  113.                     setPages();
  114.                 }
  115.             })
  116.             /* 点击右省略号向右翻页 */
  117.             $('#rightOmit').click(function () {
  118.                 if (PageIndex <= totalPage - 10) {
  119.                     PageIndex += 10;
  120.                     pageHtml.empty();
  121.                     setPages();
  122.                 }
  123.             })
  124.             /* 左省略号移入移出 */
  125.             $('#leftOmit').mouseenter(function () {
  126.                 $(this).children().html(leftOmitIcon);
  127.             })
  128.             $('#leftOmit').mouseleave(function () {
  129.                 $(this).children().html('...');
  130.             })
  131.             /* 右省略号移入移出 */
  132.             $('#rightOmit').mouseenter(function () {
  133.                 $(this).children().html(rightOmitIcon);
  134.             })
  135.             $('#rightOmit').mouseleave(function () {
  136.                 $(this).children().html('...');
  137.             })
  138.         }
  140.         setPages();
  141.     })
  142. </script>
  144. </html>

3、实现效果

jQuery+bootstrap实现有省略号的数据分页

jQuery+bootstrap实现有省略号的数据分页的更多相关文章

  1. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  2. Jqgrid pager 关于“local” dataType 动态加载数据分页的研究（没好用的研究结果）

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. mysq大数据分页

    mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...

  4. Sql Server 数据分页

    http://www.cnblogs.com/qqlin/archive/2012/11/01/2745161.html 1.引言 在列表查询时由于数据量非常多,一次性查出来会非常慢,就算一次查出来了 ...

  5. Oracle、MySql、SQLServer数据分页查询

    看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...

  6. 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页

    回到目录 数据分页是这个经常说的东西,无论在WEBForm还是WinForm中它都会被单独拿出来,或者是公用组件,或者是公用类库,反正对于数据分页这个东西,总是我们关注的一个话题,但事实上,数据分页归 ...

  7. salesforce 零基础开发入门学习（八）数据分页简单制作

    本篇介绍通过使用VF自带标签和Apex实现简单的数据翻页功能. 代码上来之前首先简单介绍一下本篇用到的主要知识: 1.ApexPages命名空间 此命名空间下的类用于VF的控制. 主要的类包括但不限于 ...

  8. Oracle中的数据分页

    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...

  9. 数据分页处理系列之三：Neo4j图数据分页处理

      首先简单介绍下Neo4j,Neo4j是一个高性能的NOSQL图形数据库,它将结构化数据存储在网络上而不是表中,它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数 ...

随机推荐

  1. rcu的学习记录

    crash> p rcu_sched_state.node[0] $13 = { lock = { raw_lock = { slock = 748760225 } }, gpnum = 211 ...

  2. HDU4372 Count the Buildings （+题解：斯特林数）

    题面 (笔者翻译) There are N buildings standing in a straight line in the City, numbered from 1 to N. The h ...

  3. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  4. Android配置OpenCV C++开发环境

    网上的OpenCV配置环境大部分都不能正常配置成功,不是编译时报找不到so,就是运行找不到so.本文是我试了不少坑才找到的配置方法.其原理是让AndroidStudio自己根据mk文件自动配置. 1. ...

  5. SpringBoot使用自定义注解+AOP+Redis实现接口限流

    为什么要限流 系统在设计的时候,我们会有一个系统的预估容量,长时间超过系统能承受的TPS/QPS阈值,系统有可能会被压垮,最终导致整个服务不可用.为了避免这种情况,我们就需要对接口请求进行限流. 所以 ...

  6. day36-IO流03

    JavaIO流03 4.常用的类02 4.4节点流和处理流 4.4.1基本介绍 节点流可以从一个特定的数据源读写数据,如FileReader.FileWriter 数据源就是存放数据的地方,比如文件. ...

  7. 【Shashlik.EventBus】.NET 事件总线，分布式事务最终一致性

    [Shashlik.EventBus].NET 事件总线,分布式事务最终一致性 简介 github https://github.com/dotnet-shashlik/shashlik.eventb ...

  8. Exchange如何将邮件转发给外部邮件地址

    Exchange如何将邮件转发给外部邮件地址 最近遇到一个需求.一位已经离职的员工需要将后续的邮件转发给他自己的私人邮箱.安全,行政的审核通过后,这个问题就到了技术部门了. Exchange可以很方便 ...

  9. Python数据科学手册-机器学习: 决策树与随机森林

    无参数 算法 随机森林 随机森林是一种集成方法,集成多个比较简单的评估器形成累计效果. 导入标准程序库 随机森林的诱因: 决策树 随机森林是建立在决策树 基础上 的集成学习器 建一颗决策树 二叉决策树 ...

  10. 【疑难杂症】关于pytorch安装的一些问题

    问题一:选用哪个版本 直接下载Anaconda,会自动给你附加最合适的python版本,再去pytorch官网直接找到自己需要的版本下载 问题二:下载pytorch速度太慢 直接把下载代码最后面的-c ...