jQuery 的插件 dataTables 是一個(gè)優(yōu)秀的表格插件，提供了針對(duì)表格的排序、瀏覽器分頁(yè)、服務(wù)器分頁(yè)、篩選、格式化等功能。dataTables 的網(wǎng)站上也提供了大量的演示和詳細(xì)的文檔進(jìn)行說(shuō)明，為了方便學(xué)習(xí)使用，這里一步一步進(jìn)行說(shuō)明。

首先，需要到 dataTables 的網(wǎng)站 http://www.datatables.net/ 下載這個(gè)腳本庫(kù)，

目前的版本是 1.7.5，下載的壓縮包中使用的 jQuery 是 1.4.4 。現(xiàn)在 jQuery1.5.1 已經(jīng)發(fā)布，所以，這里使用最新的 jQuery 1.5.1 。

然后，在網(wǎng)頁(yè)中先加入 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>

對(duì)于 dataTables 來(lái)說(shuō)，表格必須通過(guò) thead 和 tbody 進(jìn)行說(shuō)明，如下所示，

<div id="demo">
    <table class="main_right_table02" style="margin-top:32px;" id="example">
       <thead>
      <tr class="title">
        <td>銀行名稱</td>

        <td>提現(xiàn)支出</td>
        <td>轉(zhuǎn)存收入</td>
        <td>狀態(tài)</td>
        <td>對(duì)賬結(jié)束</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>中國(guó)工商銀行</td>
        <td class="orange">100</td>
        <td>200</td>
        <td class="orange">已對(duì)</td>
        <td>平</td>

        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
      <tr class="con">
        <td>中國(guó)建設(shè)銀行</td>
        <td class="orange">100</td>
        <td>20</td>
        <td class="orange">未對(duì)</td>

        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)工商銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)工商銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)工商銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)工商銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)建設(shè)銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)建設(shè)銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
<tr>
       <td>中國(guó)交通銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
  <tr>
       <td>中國(guó)建設(shè)銀行</td>
        <td class="orange">100</td>
        <td>20</td>

        <td class="orange">未對(duì)</td>
        <td>&nbsp;</td>
        <td class="orange"><a href="query-c1.html" target="_parent">查看</a></td>
  </tr>
      
<tr>
        <td>合計(jì)：</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>