HTML纯Js分页，带分页脚本和数据例子

小咪咪 2023-01-13 05:54 199阅读 0赞

背景：  
在数据化时代，我们经常需要处理批量的数据，通常在页面上，我们会使用一个table显示来显示数据，当条数较多时，会使用分页的模式。  
在网上，可以找到各种各样的分页插件和代码。jsp可以使用jstl，php可以使用smarty。  
为了可以在不同语言的网站都可以使用相同的分页方式，也就是在不改变可视化页面html的情况下，可以在不同的环境下使用分页，甚至在没有服务器的情况下也可以使用，最好的就是使用纯js分页。在网上摸索了一段时间，还是没有找到跟我想要目的一样的js包。于是只好自己动手了。

学习创建过程：  
1：重整PHP网站时发现，原来网站上的大部分页面都嵌套了PHP和html两种语法，在数据分页上也是用PHP脚本实现。很明显不符合MVC编程规范，于是决定在自己重整的时候，使用MVC模式。开始码代码的时候发现，自己竟然不会再PHP中使用ajax，之前在jsp中使用的时候挺顺手的，在PHP中数据类型变了之后，明显的力不从心了。所以只好开始研究ajax。  
2：学习jQuery的ajax也是一个漫长的过程，因为一直找不到下手的方向，最后在耐心的调试下，总算摸清它的使用方式，这也让我下决心要自己写分页js，别人的东西虽然好，但太复杂了，又不好重构。关于使用ajax，有兴趣可以看看我的文章[http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu]  
3：弄懂怎么使用ajax后，就开始写我的分页js了，开始后才发现，自己根本不知道怎么写js，只好到网上下载各种简单的js下来看，了解js编写的基本规范和语法。只要看了比较规范的有dTree.js。  
4：磨磨蹭蹭的总算把自己第一个分页js写出来了。

介绍：  
1：可以使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成json格式的字符串，之后会将转换为js的array数组。  
2：调用是使用pagetool = new Pageglobal(data,pama,“list”,“pagecount”);其中data为列表数据(json字符串)，格式可以参考例子，pama是数据列名，将按顺序将数据显示到表格中，"list"为显示数据的地方，也就是在数据table中的tbody的id，"pagecount"是显示分页脚本的地方，在table后建立的div的id。其中pama的格式为var pama = \[“id1”,“id2”,“id3”,“id4”\];实例化pagetool后，要调用pagetool.init();进行第一次加载数据和分页脚本。  
3：此工具目前功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

代码下载地址：[http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu]

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/7596d6dae5cc49a68e50dbbc3e9ef755.png