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>
posted on 2011-08-05 09:35
墙头草 阅读(7732)
评论(2) 编辑 收藏