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

背景:
在数据化时代,我们经常需要处理批量的数据,通常在页面上,我们会使用一个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://yezhihong.com/?p=108
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:此工具目前功能还比较简单,只能单纯显示数据,有其他需求可以联系探讨。

效果图

代码下载地址http://download.csdn.net/detail/hundun110/8035511

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值