读书人

DataTables的施用

发布时间: 2012-11-06 14:07:00 作者: rapoo

DataTables的使用

最近在工作中,用了DataTables做为展示数据的表格。该控件支持分页,而且又漂亮。这是官网的地址http://www.datatables.net/ 。本文记录我在工作中用到DataTables的相关功能及实现。


在采用这个控件之前,服务端向网页返回数据,页面用javascipt将数据拼接成html的表格,代码中充斥着很多 += '<td>' '<tr>' '<a>'。而且还要处理分页,每个页码还要自己绑定一个拼接的url请求,代码不仅长,而且页面的展示效果不好功能也不够强大。

采用了这个控件展示数据后,javascript的代码减少了70-80行。它要求服务端要按照它规定的数据格式返回数据,接着会帮我们自动处理分页和数据的展示,就不用我们手动拼接字符串构造table表的元素了。

先看代码:



这是底部的分页栏

DataTables的施用


当我点第二页时,传递参数如下:

DataTables的施用

注意到iDisplayLength是10,因为我默认是每页展示10条数据,这个值可以调整。当我点第二页时,iDisplayStart从0变到10。其实分页就是这么回事,前端告诉服务端,我需要那段数据,你给我找出来返回给我。

服务端的返回格式如下(PHP):

$("#search").click(function(){        g_table.fnDestroy();        generate_table();  });

重新生成表格会默认第一页,而每次搜索都是根据不同的关键字和日期的,所以跳到第一页是合理的。如果不用fnDestroy(),试图直接覆盖g_table重新生成,这是不允许的。

至此,实现了基于DataTables的数据查找及分页。


读书人网 >Web前端

热点推荐