1、前言

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

2、实现过程

<!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>分页</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>

    <nav aria-label="Page navigation" style="margin-top: 50px;">

        <input type="text" name="pagenumber" value="1" hidden />

        <ul class="pagination"></ul>

    </nav>

</body>

<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    $(document).ready(function () {

        let total = 1000; // 数据总条数

        let PageIndex = 1;// 当前页

        let PageSize = 10; //一页显示10条

        let pageHtml = $('.pagination'); // 分页栏

        let totalPage = Math.ceil(total / PageSize); // 获取到总页数

        function setPages() {

            let pageBtnPrev = "<li class='page-item btnPrev'><a class='page-link' aria-label='Previous'><span aria-hidden='true'>«</span></a ></li>";

            let pageBtnNext = "<li class='page-item btnNext'><a class='page-link' aria-label='Next'><span aria-hidden='true'>»</span></a></li>";

            let pageTips = "<div style='line-height:38px'>" + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "</div > ";

            pageHtml.append(pageBtnPrev); // 添加左按钮

            // 第一页

            let firstPage = $("<li class='page-item' pagenumber=1><a class='page-link'>1</a ></li> ");

            // 最后一页

            let lastPage = $("<li class='page-item' pagenumber='" + totalPage + "'><a class='page-link'>" + totalPage + "</a ></li>");

            // 左省略号

            let leftOmitPage = $("<li class='page-item' id='leftOmit'><a class='page-link'>...</a></li>");

            // 右省略号

            let rightOmitPage = $("<li class='page-item' id='rightOmit'><a class='page-link'>...</a></li>");

            // 左省略号图标

            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'>" +

                "<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>");

            // 右省略号图标

            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'>" +

                "<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>");

            // 总页数小于等于9页全部显示

            if (totalPage <= 9) {

                for (let i = 1; i <= totalPage; i++) {

                    pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));

                }

            } else if (PageIndex <= 8) {  //总页数大于10且当前页远离总页数

                for (let i = 1; i <= 9; i++) {

                    pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));

                }

                pageHtml.append(rightOmitPage);

                pageHtml.append(lastPage);

                //总页数大于10且当前页接近总页数

            } else if (PageIndex > totalPage - 7) {

                pageHtml.append(firstPage);

                pageHtml.append(leftOmitPage);

                for (let i = totalPage - 8; i <= totalPage; i++) {

                    pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));

                }

                //除开上面两个情况 当前页在中间

            } else {

                pageHtml.append(firstPage);

                pageHtml.append(leftOmitPage);

                for (let i = PageIndex - 3; i <= PageIndex + 3; i++) {

                    pageHtml.append($("<li class='page-item' pagenumber=" + i + "><a class='page-link'>" + i + "</a ></li> "));

                }

                pageHtml.append(rightOmitPage);

                pageHtml.append(lastPage);

            }

            $(".pagination li[pagenumber='" + PageIndex + "']").addClass('active');

            pageHtml.append(pageBtnNext); // 添加右按钮

            pageHtml.append(pageTips); // 添加右下角items提示栏

            /* 点击页码按钮进行翻页 */

            $(".pagination li[pagenumber]").on('click', function () { // 页数跳转

                PageIndex = Number($(this).text()); // 当前页

                $('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页

                $(this).siblings('li').removeClass('active');

                $(this).addClass('active');

                pageHtml.empty();

                setPages();

            })

            /* 点击按钮进行翻页 */

            $(".btnPrev").on('click', function () { // 向左翻页

                if (PageIndex > 1) {

                    PageIndex--;

                    pageHtml.empty();

                    setPages();

                }

                $(this).addClass('disabled');

            })

            $(".btnNext").on('click', function () { // 向右翻页

                if (PageIndex < totalPage) {

                    PageIndex++;

                    pageHtml.empty();

                    setPages();

                }

                $(this).addClass('disabled');

            })

            /* 点击左省略号向左翻页 */

            $('#leftOmit').click(function () {

                if (PageIndex > 10) {

                    PageIndex -= 10;

                    pageHtml.empty();

                    setPages();

                }

            })

            /* 点击右省略号向右翻页 */

            $('#rightOmit').click(function () {

                if (PageIndex <= totalPage - 10) {

                    PageIndex += 10;

                    pageHtml.empty();

                    setPages();

                }

            })

            /* 左省略号移入移出 */

            $('#leftOmit').mouseenter(function () {

                $(this).children().html(leftOmitIcon);

            })

            $('#leftOmit').mouseleave(function () {

                $(this).children().html('...');

            })

            /* 右省略号移入移出 */

            $('#rightOmit').mouseenter(function () {

                $(this).children().html(rightOmitIcon);

            })

            $('#rightOmit').mouseleave(function () {

                $(this).children().html('...');

            })

        }

        setPages();

    })

</script>

</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. CSS 笔记目录

    布局 CSS 布局(一):Flex 布局 选择器 CSS 选择器(一):属性选择器 CSS 选择器(二):子代选择器(>)

  2. 基于Go语言的xmind读写库，我主要用来把有道云笔记思维导图转为xmind

    项目地址 xmind 基于go语言的xmind接口 使用方法参考: example 本库主要加载xmind文件为json结构,保存文件时也用的json结构而不是xml结构 本库只做了最基本的主题添加功 ...

  3. Markdown使用指南

    1. Markdown是什么? Markdown是一种轻量级标记语言,它以纯文本形式(易读.易写.易更改)编写文档,并最终以HTML格式发布. Markdown也可以理解为将以MARKDOWN语法编写 ...

  4. [CF1537E] Erase and Extend （字符串）

    题面 给一个长度为 n \tt n n 的字符串,你可以进行无限次以下两种操作之一: 删去末尾的字符(此时要保证删去后字符串非空). 把当前整个字符串复制一份,接到自己的后面. 输出最终通过操作能达到 ...

  5. 蕞短鹭(artskjid) （⭐通信题/模拟⭐）

    文章目录 题面(过于冗长,主要是对通信题的一些解释) 题解 1.通信题什么意思 2.此题题解 CODE 实现 题面(过于冗长,主要是对通信题的一些解释) 题解 1.通信题什么意思 并不是两个程序同时跑 ...

  6. 强大多云混合多K8S集群管理平台Rancher入门实战

    @ 目录 概述 定义 为何使用 其他产品 安装 简述 规划 基础环境 Docker安装 Rancher安装 创建用户 创建集群 添加Node节点 配置kubectl 创建项目和名称空间 发布应用 偏好 ...

  7. C++工厂方法模式讲解和代码示例

    在C++中使用模式 使用示例: 工厂方法模式在 C++ 代码中得到了广泛使用. 当你需要在代码中提供高层次的灵活性时, 该模式会非常实用. 识别方法: 工厂方法可通过构建方法来识别, 它会创建具体类的 ...

  8. vim 正则表达式

    1.查找字符串 /str n 下一个 2.替换表达式 :[range]s/from/to/[flags] range:搜索范围,如果没有指定范围,则作用于但前行. :1,10s/from/to/ 表示 ...

  9. 在Windows Server 2019上安装edge浏览器

    在Windows 2016和2019的正式版本中是不带Edge浏览器的.有些工具.网站也不支持IE浏览器了.对于偶尔需要在服务器上访问这些站点的管理员来说有些不方便.不过可以通过安装三方浏览器或者Ed ...

  10. 在kibana中查看nginx日志的Discover，Dashboards

    官方的操作: 1.安装filebeat,配置filebeat获取nginx日志,来源有两种: 第一种是使用自带的模块进行收集,在modules.d目录中启用模块配置,运行Filebeat时启用模块,在 ...