jQuery datatables使用

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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">&nbsp;</td>
      <td>&nbsp;</td>
      <td class="orange">&nbsp;</td>
  </tr>
</tbody>
</table>
</div>
如果没有 thead 将会报错。

jQuery datatables使用

最为简单的使用方式,就是零配置的方式。

 
/*   

 * Example init  

 */ 

$(document).ready(function(){  

    $('#example').dataTable();  

});
 
表格的效果

jQuery datatables使用

注意,红框表示了四个默认的设置效果,分别用来选择每页的行数,表格的过滤器,表格的信息和换页。

此时,使用了几个默认的参数设置。在 dataTables 中,参数名称的前缀用来说明参数的数据类型,很明显,b 表示布尔类型,i 表示整数类型,s 表示字符串类型。

  • bPaginate: 是否分页,默认为 true,分页
  • iDisplayLength : 每页的行数,每页默认数量:10
  • sPaginationType: 分页样式,支持两种内置方式,two_button 和 full_numbers, 默认使用 two_button。
  • bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
  • bFilter: 启用或禁止数据过滤,默认为 true。 注意,如果使用过滤功能,但是希望关闭默认的过滤输入框,应使用 sDom
  • bInfo: 允许或者禁止表信息的显示,默认为 true,显示信息。

 我们也可以通过传递一个初始化参数对象来改变这些设置。例如,下面的例子将每页的行数设置为 20 行。

$(function () {  

    $("#example").dataTable(  

      {  

          iDisplayLength: 20  

      }  

    );  

});
 

相关推荐