关于jQurey的分页createPage

用了jQurey的分页，不过他的分页本身有问题，就是他没写分页如何去更新总页数，比如我一个页面有tab需要切换两个table，用的一个分页组件，或者请求接口去更新总条数数据，问题很大

代码

js

(function ($) {var zp = {init: function (obj, pageinit) {return (function () {zp.addhtml(obj, pageinit);zp.bindEvent(obj, pageinit);}());},addhtml: function (obj, pageinit) {return (function () {obj.empty();/*上一页*/if (pageinit.current > 1) {obj.append('<a href="javascript:;" class="prebtn">上一页</a>');} else {obj.remove('.prevPage');obj.append('<span class="disabled">上一页</span>');}/*中间页*/if (pageinit.current > 4 && pageinit.pageNum > 4) {obj.append('<a href="javascript:;" class="zxfPagenum">' + 1 + '</a>');obj.append('<a href="javascript:;" class="zxfPagenum">' + 2 + '</a>');obj.append('<span>...</span>');}if (pageinit.current > 4 && pageinit.current <= pageinit.pageNum - 5) {var start = pageinit.current - 2, end = pageinit.current + 2;} else if (pageinit.current > 4 && pageinit.current > pageinit.pageNum - 5) {var start = pageinit.pageNum - 4, end = pageinit.pageNum;} else {var start = 1, end = 9;}for (; start <= end; start++) {if (start <= pageinit.pageNum && start >= 1) {if (start == pageinit.current) {obj.append('<span class="current">' + start + '</span>');} else if (start == pageinit.current + 1) {obj.append('<a href="javascript:;" class="zxfPagenum nextpage">' + start + '</a>');} else {obj.append('<a href="javascript:;" class="zxfPagenum">' + start + '</a>');}}}if (end < pageinit.pageNum) {obj.append('<span>...</span>');}/*下一页*/if (pageinit.current >= pageinit.pageNum) {obj.remove('.nextbtn');obj.append('<span class="disabled">下一页</span>');} else {obj.append('<a href="javascript:;" class="nextbtn">下一页</a>');}/*尾部*/obj.append('<span>' + '共' + '<b>' + pageinit.pageNum + '</b>' + '页，' + '</span>');obj.append('<span>' + '到第' + '<input type="number" min="1" max="' + pageinit.pageNum + '" class="zxfinput" value="1"/>' + '页' + '</span>');obj.append('<span class="zxfokbtn">' + '确定' + '</span>');}());},bindEvent: function (obj, pageinit) {return (function () {obj.on("click", "a.prebtn", function () {var cur = parseInt(obj.children("span.current").text());var current = $.extend(pageinit, {"current": cur - 1});zp.addhtml(obj, current);if (typeof (pageinit.backfun) == "function") {pageinit.backfun(current);}});obj.on("click", "a.zxfPagenum", function () {var cur = parseInt($(this).text());var current = $.extend(pageinit, {"current": cur});zp.addhtml(obj, current);if (typeof (pageinit.backfun) == "function") {pageinit.backfun(current);}});obj.on("click", "a.nextbtn", function () {var cur = parseInt(obj.children("span.current").text());var current = $.extend(pageinit, {"current": cur + 1});zp.addhtml(obj, current);if (typeof (pageinit.backfun) == "function") {pageinit.backfun(current);}});obj.on("click", "span.zxfokbtn", function () {var cur = parseInt($("input.zxfinput").val());var current = $.extend(pageinit, {"current": cur});zp.addhtml(obj, {"current": cur, "pageNum": pageinit.pageNum});if (typeof (pageinit.backfun) == "function") {pageinit.backfun(current);}});}());}}$.fn.createPage = function (options) {var pageinit = $.extend({pageNum: 15,current: 1,backfun: function () {}}, options);zp.init(this, pageinit);}
}(jQuery));

CSS

.page{text-align: center; margin: 20px}
.zxf_pagediv {text-align: center;}
.zxf_pagediv a { display: inline-block; margin: 0 10px; border: 1px solid #e4e1e1; background: #fff; line-height: 26px; padding: 0 15px;}
.zxf_pagediv .zxfinput {border: 1px solid #e4e1e1; background: #fff; line-height: 26px; text-align: center; width: 40px; margin: 0 10px;}
.zxf_pagediv .zxfokbtn {margin: 0 10px; border: 1px solid #e4e1e1; background: #fff; line-height: 26px; padding: 0 15px; display: inline-block;}
.zxf_pagediv span.current {background: #30a5da;color: #fff;margin: 0 10px; border: 1px solid #30a5da; line-height: 26px; padding: 0 15px; display: inline-block;}
.zxf_pagediv span.disabled {margin: 0 10px; border: 1px solid #e4e1e1; background: #fff; line-height: 26px; padding: 0 15px; display: inline-block;color: #999;}

页面调用

<div class="page"><div id="yzzlsxhmd_page" class="zxf_pagediv"></div>
</div>

//翻页
$("#yzzlsxhmd_page").createPage({pageNum: total,current: 1,backfun: function(e) {}
})

pageNum是总页数，也就是说你分页插件显示多少页，但是我们大多数的时候是根据总条数去赋值来显示有多少页，比如干VUE项目用element的ui分页，这里发下算法，特意去看了下其他组件的源码

Math.ceil(总条数 / 每页多少条)

pageNum传入自己算出来的就可以了。

current代表当前第几页

backfun回调函数，当你去点击分页插件上的事件时回返回分页会切换到第几页，e.current就是第几页

说下我踩的坑吧，之前说过了，我要更新分页上的条数页数数据，但是封装的js里只有createPage，后来我就去每次都去调用，发现调多了，每次点下一页都会跳N次，就好比事件重合了N次。看了下封装

每次调用都会去绑定事件，那么问题解决了，只要自己写套更新不要绑定事件就好了

这样我们首次进页面保证初始化的时候create只执行一次，剩下在页面不关闭的情况下只让他刷新就好了

比如我做了个flag初始的时候true，调过一次就false，只刷新就好了

关于jQurey的分页createPage相关推荐

基于hibernate实现的分页技术
先说明一下基于hibernate实现分页的原理,假如从数据库取出100条数据,我们要让每页显示10条,假如从30开始,只需要设置起始位置和最大的返回结果即可先上代码:注意传进来的参数有 Page这类 ...
jquery 前台分页插件总结（1 前台假分页 2 后台分页）
该分页插件只展示当前数据,如果前台分页需要把所有数据切割展示才能实现的前台分页使用前需要引入font-awesome 和分页插件js(在最下面) 拷贝直接用即可实现,替换一下数据 1 前台分页情况 ...
Web打印连续的表格，自动根据行高分页
拿到这个需求,我已经蛋碎了一地,经过N天的攻克,终于是把它搞定了,只是不知道会不会在某种情况下出现BUG.表示我心虚没有敢做太多的测试.... ---------------------------- ...
很强大的一个jquery分页插件
jQuery.page.js //分页插件 /** ch **/ (function($){var ms = {init:function(obj,args){return (function(){m ...
html分页页码中间省略,jquery实现了一个分页，如何是现实固定的页码数，查过部分用页码省略号代替？...
墨色风雨好久之前,参考论坛分页后端模板输出逻辑弄过一个. function makePage (total, page) {//生成页码 var pages = ...
jquery分页插件的修改
前言最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
使用 Gatsby.js 搭建静态博客 2 实现分页
原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能. 理解页面创建原理 ...
js实现数据分页算法
数据分页算法一.分页算法二.百度分页算法三.带数据的分页算法一.分页算法 <script>//当前页和总页码var nowPage=10; ...
POI操作WORD分页
按照以往的思路和经验,在POI中创建一个DOC的对象: XWPFDocument doc = new XWPFDocument(); 这个对象理应存在一个方法:doc.createPage(),并且返 ...

关于jQurey的分页createPage

js

CSS

页面调用

关于jQurey的分页createPage相关推荐

最新文章

热门文章