tablesorter
NinGoo's blog

用jQuery+Tablesorter实现客户端分页与排序

最近花了比较多的时间在自己开发的一个数据库监控系统上。监控系统的架构很简单,主要用shell+perl+SQL采集数据到一个MySQL数据库中,然后使用php来做web展示。对于仅仅定位于团队内部使用的小系统来说,这样的架构足够了,简单有效。

为了将数据库中的一些详细数据展示到web页面,采用了PEAR::HTML_Table,可以将SQL查询的结果直接转换成html表格。HTML_Table功能比较单一,如果要实现分页与排序的功能,还需要借助SQL语句。在MySQL中,如果要根据选择的任何一列都能用来排序的话,只要该列没有索引,就必须filesort进行实际的排序。由于系统中没有引入cache层,每次页面刷新都要到数据库中执行排序的SQL,性能是比较差的。

因此便想用javascript在客户端实现分页与排序,数据库中只要一次性选出需要的数据即可。jQuery是目前比较流行的一个javascript框架,以前也是久闻其名,但一直没有用过。Google了一把,发现其用法还是非常简单的,短短几行代码,就可以实现我所想要的效果。jQuery功能强大,但其实就是一个120K左右的js文件,并且还支持插件,分页功能就是通过一个叫tablesorter的插件实现的。

使用jQuery+Tablesorter实现客户端分页与排序,只需要10几行代码足矣。唯一的要求,就是html的table标签内要包含thead和tbody部分,这可以调用HTML_Table::getHeader()生成thead,调用HTML_Table::getBody()生成tbody部分。然后在需要展示数据的页面引入jQuery和Tablesorter的js库文件,再加上几行代码即可实现客户端javascript对数据table的分页与排序,并且还支持动态修改每页数据行数,支持多列排序等。具体的例子和代码,都可以在本文的链接中找到,就不在这里多说了。

Web开发我是外行,几年前学了点php的皮毛,知识已经多年没有更新过了。Ajax和web2.0的年代,javascript确实重新焕发了青春,像jQuery这样的框架,真的是不可多得的好东西,对于像我这样的初学者,也能很快上手做出相当不错的页面效果,这才是技术的生产力啊。

当然,在客户端做分页和排序有利也有弊。因为所有数据是一开始就全部从数据库中选取并返回客户端的,如果数据量比较大,那么第一次加载页面的时间就会比较长,并且可能占用客户端过多的资源。所以必须仔细权衡,在合适的场景用合适的技术。