前端JS分页组件，纯手写，基本功能完善 ，参数格式支持mybatis pagehelper

最新推荐文章于 2024-05-03 15:43:47 发布
最新推荐文章于 2024-05-03 15:43:47 发布
阅读量425 收藏 2
点赞数
分类专栏： java js 文章标签： 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_29150847/article/details/86300213
版权
java 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏 
/**
 * JS分页组件 数据格式参考 mybatis PageHelper 查询的分页方法看会的数据格式
 * @param data
 * @returns {string}
 */
function pagination(data) {

    var count = data.total // 总数
    var firstPage = data.firstPage // 首页
    var pageNum = data.pageNum //当前页
    var prevPage = pageNum - 1; //  上一页
    var nextPage = data.nextPage // 下一页
    var lastPage = data.pages // 最后一页

    var length = 5;
    var slider = 2;

    var html;

    if (pageNum == firstPage) {
        html = ' <li class="previous disabled" aria-controls="searchlist" tabindex="0" id="searchlist_previous"><a href="javascript:void(0)" class="prev" title="上一页"><i class="iconfont icon-arrow-left"></i></a></li>'
    } else {
        html = '<li class="previous" aria-controls="searchlist" tabindex="0" id="searchlist_previous"><a href="javascript:void(0)" class="prev" title="上一页" onclick="findList(' + prevPage + ')"><i class="iconfont icon-arrow-left"></i></a></li>'
    }

    var start = 0
    if (pageNum == length) {
        start = 1;
    }
    if (pageNum > length && pageNum < lastPage - slider) {
        start = pageNum - length + 1;
    }

    if (pageNum >= lastPage - slider && pageNum - length >1) {
        start = pageNum - length;
    }

    if (start > 0 && start < lastPage - slider) {
        length = length + start
    } else {
        start = 0;
    }
    console.log(start)

    for (i = start; i < length; i++) {

        var index = i + 1

        if (index == pageNum && index < lastPage - slider) {
            html = html + '<li aria-controls="searchlist" tabindex="0" id=""><a href="javascript:void(0)">' + index + '</a></li>'
        } else {
            if (index <= lastPage - slider) {
                html = html + '<li aria-controls="searchlist" tabindex="0" id=""><a href="javascript:void(0)" onclick="findList(' + index + ')">' + index + '</a></li>'
            }
        }

        if (index == length && index < lastPage - slider) {
            html = html + '<li aria-controls="searchlist" tabindex="0"><a href="javascript:void(0)" class="dot">...</a></li>'
        }
    }


    if (lastPage > 1) {
        for (var i = 1; i <= slider; i++) {
            var index = lastPage - slider + i
            html = html + '<li aria-controls="searchlist" tabindex="0" id=""><a href="javascript:void(0)" onclick="findList(' + index + ')">' + index + '</a></li>'
        }
    }else {
        html = html + '<li aria-controls="searchlist" tabindex="0" id=""><a href="javascript:void(0)">' + firstPage + '</a></li>'
    }



    if (pageNum == lastPage) {
        html = html + '<li class="next disabled" aria-controls="searchlist" tabindex="0" id="searchlist_next"><a href="javascript:void(0)" class="next" title="下一页"><i class="iconfont icon-arrow-right"></i></a></li>'
    } else {
        html = html + '<li class="next" aria-controls="searchlist" tabindex="0" id="searchlist_next"><a href="javascript:void(0)" class="next" title="下一页" onclick="findList(' + nextPage + ')"><i class="iconfont icon-arrow-right"></i></a></li>'
    }
    return html;
}

更新一个 选中事件 和 当前页 禁止点击判断    

/**
 * JS分页组件 数据格式参考 mybatis PageHelper 查询的分页方法看会的数据格式
 * @param data
 * @returns {string}
 */
function pagination(data) {

    var count = data.total // 总数
    var firstPage = data.firstPage // 首页
    var pageNum = data.pageNum //当前页
    var prevPage = pageNum - 1; //  上一页
    var nextPage = data.nextPage // 下一页
    var lastPage = data.pages // 最后一页

    var length  =5;
    var slider = 2;

    var html;

    if (pageNum == firstPage) {
        html = ' <li class="previous disabled" aria-controls="searchlist" tabindex="0" id="searchlist_previous"><a href="javascript:void(0)" class="prev" title="上一页"><i class="iconfont icon-arrow-left"></i></a></li>'
    } else {
        html = '<li class="previous" aria-controls="searchlist" tabindex="0" id="searchlist_previous"><a href="javascript:void(0)" class="prev" title="上一页" onclick="findList(' + prevPage + ')"><i class="iconfont icon-arrow-left"></i></a></li>'
    }

    var start = 0
    if (pageNum == length) {
        start = 1;
    }
    if (pageNum > length && pageNum < lastPage - slider) {
        start = pageNum - length + 1;
    }

    if (pageNum >= lastPage - slider && pageNum - length >1) {
        start = pageNum - length;
    }

    if (start > 0 && start < lastPage - slider) {
        length = length + start
    } else {
        start = 0;
    }

    for (i = start; i < length; i++) {

        var index = i + 1

        if (index == pageNum && index < lastPage - slider) {
            html = html + '<li aria-controls="searchlist" tabindex="0" class="active"><a href="javascript:void(0)">' + index + '</a></li>'
        } else {
            if (index <= lastPage - slider) {
                if (index == pageNum) {
                    html = html + '<li aria-controls="searchlist" tabindex="0" class="active"><a href="javascript:void(0)">' + index + '</a></li>'
                }else {
                    html = html + '<li aria-controls="searchlist" tabindex="0"><a href="javascript:void(0)" onclick="findList(' + index + ')">' + index + '</a></li>'
                }
            }
        }

        if (index == length && index < lastPage - slider) {
            html = html + '<li aria-controls="searchlist" tabindex="0"><a href="javascript:void(0)" class="dot">...</a></li>'
        }
    }

    if (lastPage > 1) {
        for (var i = 1; i <= slider; i++) {
            var index = lastPage - slider + i
            if (index == pageNum) {
                html = html + '<li aria-controls="searchlist" tabindex="0" class="active"><a href="javascript:void(0)">' + index + '</a></li>'
            }else {
                html = html + '<li aria-controls="searchlist" tabindex="0"><a href="javascript:void(0)" onclick="findList(' + index + ')">' + index + '</a></li>'
            }
        }
    }else {
        html = html + '<li aria-controls="searchlist" tabindex="0" class="active"><a href="javascript:void(0)">' + firstPage + '</a></li>'
    }

    if (pageNum == lastPage) {
        html = html + '<li class="next disabled" aria-controls="searchlist" tabindex="0" id="searchlist_next"><a href="javascript:void(0)" class="next" title="下一页"><i class="iconfont icon-arrow-right"></i></a></li>'
    } else {
        html = html + '<li class="next" aria-controls="searchlist" tabindex="0" id="searchlist_next"><a href="javascript:void(0)" class="next" title="下一页" onclick="findList(' + nextPage + ')"><i class="iconfont icon-arrow-right"></i></a></li>'
    }
    return html;
}

 

H记事本
关注
专栏目录
Vue+ElementUI+SpringMVC实现分页
史天航的博客
12-13 1082
Vue + ElementUI + SpringMVC实现分页 这一段时间写项目用到了Vue+ElementUI，这里记录一下使用ElementUI内置分页插件结合后端SSM框架的实现思路和实现过程。 其中遇到了很多坑，我会尽量把见到的坑都记录下来，希望对你有所帮助。 首先 让我们看一下最终效果： 起步 本博文的主要讲一下Vue+ElementUI结合后端SpringMVC实现分...
SSM框架的介绍
weixin_44093711的博客
11-18 2181
Spring 整个项目中装配Bean的大工厂，在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象，有两个核心分别是IOC(控制反转)和AOP(面向切面编程) IOC控制反转，简单说就是讲new关键字创建对象的权利交给Spring框架来管理，开发者只关注业务逻辑处理 AOP面向切面编程，通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术，利用AOP可以对业务逻辑的各个部分进行隔离，降低业务逻辑之间的耦合度，提高代码的可重用性，同时提高了开发的效率，事务管理、日志文件打印通常用到
前端分页插件page.js
09-24
分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现； 定义一个分页方法，可多次调用 参数设置 请求数据页面跳转方法 创建非数字按钮和数据内容区 创建数字按钮 首屏加载 调用
javascript 分页组件
weixin_30267785的博客
02-14 78
自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式, id="pageDIV"用于放置JS生成的分页 CSS结构如下: ...
手写分页器组件
qq_42356513的博客
02-13 970
主题 数据量过大的时候,前端分页是避免不了的事情,记录一次手写分页器组件(估计我这辈子只会手写这一次)。 首先把静态分页器弄出来。再做js逻辑设计。 <template> <div class="pagination"> <button>上一页</button> <button>1</button> <button>···</button> <button>3&l
精简分页组件(手写)
weixin_33906657的博客
08-15 109
2019独角兽企业重金招聘Python工程师标准>>> ...
【前端项目——分页器】手写分页器实现（JS / React）
最新发布
Everglowwwwww的博客
05-03 1168
用了两种方式实现，注释详细~可能代码写的不够简洁，见谅🙁网上看了很多实现，很多只有分页器部分，没和内容显示联动。因此我增加了模拟content的显示，这里模拟了32条数据，通过分页器控制每页的显示。列举了三种，5，10，20条每页做了一个范围保护，如果超出当前范围，会自动变成最大或最小的页码。（做提示也可以，但我不想点提示的确认）
【零散知识点总结1】
weixin_44543307的博客
03-06 6641
零散笔记总结@Reference、@Autowired和@Resource的区别：Dubbohttp和HTTPSvue.js跟thymeleaf 的区别web开发，提供3个@Component注解衍生注解（功能一样）取代 @Reference、@Autowired和@Resource的区别： @Reference：是dubbo的注解，也是注入，他一般注入的是分布式的远程服务的对象，需要dubbo配置使用。 @Autowired：org.springframework.beans.factor
2022年自学Java就业全面学习路线
Teacher_Zhan的博客
06-14 630
2022年自学Java就业学习路线
面试应急精简篇
ZM_Lucky的博客
05-28 3999
面试应急精简篇
纯前端分页
06-28
使用js写的纯前端分页,可以加入数据,在本人的个人博客系统中有用到,欢迎大家研究分析
js对象分页插件
11-27
解决对象传入遍历，并且实现模板标签替换，使用者无需再去模板中更改属性，只需要把对应的属性传递进去就可以了。适合于排行，数据展示之类的分页
js分页组件
淡定如斯的博客
11-19 600
class Pagination { constructor({ id, total, pageSize, changeCallBack }) { this.total = total || 1 // 数据总数 this.pageSize = pageSize || 8 // 每页条数 this.pageIndex = 1 // 当前页码 this.pageN...
前端手写分页
weixin_47438730的博客
01-06 190
const getTableData = (page = 1, pageSize = 10, totalData = []) => { const { length } = totalData; const tableData = { data: [], page, pageSize, length, }; if (pageSize >= length) { //pageSize大于等于总数据长度，说明只有1页数据或没有数据 tableD
pageHelper分页简单手写实现
ajkksald的博客
12-09 457
//当前页 private int pageNum; //每页的数量 private int pageSize; //当前页的数量 private int size; //由于startRow和endRow不常用，这里说个具体的用法 //可以在页面中"显示startRow到endRow 共size条数据" //当前页面第一个元素在数据库中的行号 private int startRow; //当前页面最...
JS分页插件
weixin_70227543的博客
05-19 1399
<body> <div class="box"></div> <script> function Page(classname, options={}){ //将参数定义成属性 this.options = options this.fn = this.options.fn || function(){} this.containe.
JavaScript 自定义分页组件
_江屿_
01-19 502
JavaScript 自定义分页组件
Web_JavaScript_JS随记：分页组件；
cyb专栏
06-13 686
Web前端分页组件；
MyBatis PageHelper分页插件详解
PageHelper除了基本的分页功能外，还提供了许多高级特性，如排序、缓存控制、自定义参数处理等。例如，你可以通过设置`reasonable`属性来开启合理的页码处理，当输入的页码超出范围时，PageHelper会自动调整到最后一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值