脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js页码生成库，一个适合前后端分离的页码生成器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 前言
上星期写的任务里面有需要进行分页的处理，gIT搜索了一番，没有觉得合适的，于是自己临时写了个分页的算法。
然后等闲下来的时候，决定把分页进行优化并推广。于是乎，一个适合前后端分离的页码生成器就这样出来了。
先别废话了，直接上 git 地址 和 demo 地址。看官果断点击进去瞧瞧看。项目主页的 readme 文档的自动排版将更好。
先讲讲设计思想
整个开发流程围绕事件绑定进行开发。
脱离 callback 回调这种回调方法，直接使用 事件 方式触发换页前后的动作，方便解耦。
既然使用这种方式进行回调，就使用全局变量挂载分页的数据，方便回调时候进行分页数据的访问。
库的依赖
由于开发库的时候，并没有使用原生的语法进行元素或者事件绑定的操作，因此需要依赖某个库。
现阶段，经过测试支持 zepto 以及 jquery （二选一）。
css 方面，建议还是直接自己写或者使用 bootstrap 的库，源代码里面有从 bootstrap 里面抽出来的分页 css 代码。
简洁demo
由于分页就必须知道分页数据大小，因此必须传输配置对象。
复制代码
// 每页显示的数据长度，必填，而且 >1
PRePageLenght: 10,
// 数据的总长度，必填，而且 >1
dataLength: 30,
// 现在的页码，默认 1
pageNow: 1,
// 渲染分页 htML 的容器，一般框架的容器即可
renderBox: $('.pagination-box')
};
复制代码
配置之后，进行调用
// 运行即可分页
pageBuilder(pageConfig);
这样子就能进行分页了。
回调的书写
回调的书写虽然放在了调用分页的主函数后面，但是记得在调用分页之前就定义这些事件，因为一旦调用分页函数，就马上触发分页回调，写在后面了，就会忘记了刚分页时候的事件回调了。
首先是分页前的回调，分页之前会触发 window 下面一个自定义分页之前的事件 beforePageChange ，因此要触发处理分页前的动作，就这样处理：
// 提前定义好分页之前的动作，可选
$(window).on('beforePageChange', function() {
// callback
// todo
// 获取当前页码，可以从 pageBuilder.page.pageNow 取得，注意此时的值为未分页之前的旧页码。
})
同样道理，分页之后的回调差不多：
// 提前定义好分页之后的动作，可选
$(window).on('afterPageChange', function() {
// callback
// todo
// 获取当前页码，可以从 pageBuilder.page.pageNow 取得
})
特别说明
一个页面只适合使用一个分页实例。分页的动作将在 hashchange 触发之后进行分页。
里面监控页码变化的函数：
复制代码
// 绑定换页的事件
$(window).on('hashchange', function() {
var hash = location.hash;
var pageTemp = 0;
if (/^#page=/d+$/.test(hash) === true) {
// 直接是页码的
pageTemp = hash.substring(6) | 0;
if (defaultConfig.pageNow !== pageTemp) {
defaultConfig.pageNow = pageTemp;
$(window).trigger("renderPagination");
}
} else if (hash === "#page=next") {
// 下一页的
location.hash = "page=" + ( defaultConfig.pageNow + 1 );
} else if (hash === "#page=prev") {
// 上一页的
location.hash = "page=" + ( defaultConfig.pageNow - 1 );
}
})
复制代码
因为 hashchange 只支持 IE8+，
所以，该插件只适合 IE8+，甚至IE8的怪异模式不支持 hashchange 事件
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ @L_360_0@，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-js页码生成库，一个适合前后端分离的页码生成器全部内容，希望文章能够帮你解决javascript代码实例教程-js页码生成库，一个适合前后端分离的页码生成器所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。