海欣海夜 2011-08-02
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明。
首先,需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库,
目前的版本是 1.7.5,下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布,所以,这里使用最新的 jQuery 1.5.1 。
然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用。
<link href="css/style.css" rel="stylesheet" type="text/css"/> <style type="text/css" title="currentStyle"> @import "css/demo_page.css"; @import "css/demo_table.css"; </style> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#example').dataTable( { "aoColumnDefs": [ { "bVisible": false, "aTargets": [2],"bInfo":false } ] } ); } ); </script>
对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明,如下所示,
<div id="demo"> <table class="main_right_table02" style="margin-top:32px;" id="example"> <thead> <tr class="title"> <td>银行名称</td> <td>提现支出</td> <td>转存收入</td> <td>状态</td> <td>对账结束</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>中国工商银行</td> <td class="orange">100</td> <td>200</td> <td class="orange">已对</td> <td>平</td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr class="con"> <td>中国建设银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国工商银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国工商银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国工商银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国工商银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国建设银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国建设银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国交通银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>中国建设银行</td> <td class="orange">100</td> <td>20</td> <td class="orange">未对</td> <td> </td> <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td> </tr> <tr> <td>合计:</td> <td class="orange">300</td> <td>600</td> <td class="orange"> </td> <td> </td> <td class="orange"> </td> </tr> </tbody> </table> </div>
最为简单的使用方式,就是零配置的方式。
注意,红框表示了四个默认的设置效果,分别用来选择每页的行数,表格的过滤器,表格的信息和换页。
此时,使用了几个默认的参数设置。在 dataTables 中,参数名称的前缀用来说明参数的数据类型,很明显,b 表示布尔类型,i 表示整数类型,s 表示字符串类型。
我们也可以通过传递一个初始化参数对象来改变这些设置。例如,下面的例子将每页的行数设置为 20 行。
$(function () {
$("#example").dataTable(
{
iDisplayLength: 20
}
);
});