[轉貼] dataTables 快速完成資料表的分頁、搜尋、排序

• 作者：Allan Jardine
• 官網：http://www.datatables.net/

客戶常會要求在後台要顯示某些數據資料，例如一個月內退貨率高達N%的商品列表，或是指定區間內哪些商品超熱賣，而每當遇到這些"商品列表，就要套用樣板，將欄位、數值設定好，而這款dataTables，正能滿足快速製造小列表，此列表產出出來的同時就擁有了分頁、搜尋、排序的功能，相當方便，算是麻雀雖小，五臟俱全

使用方式：

載入 jQuery 及 dataTables

<script src="js/jquery.js" type="text/javascript">script>   <script src="js/dataTables.js" type="text/javascript">script>

html 格式

<table id="example" class="display" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>商品編號</th> <th>商品名稱</th> <th>分類</th> <th>顏色</th> <th>售價</th> </tr> </thead> <tbody> <tr> <td>ZA00102</td> <td>創意筆捲行李牌-藍色</td> <td>旅行小物</td> <td>blue</td> <td class="center">280</td> </tr> <tr> <td>ZA00103</td> <td>創意筆捲行李牌-黃色</td> <td>旅行小物</td> <td class="center">yellow</td> <td class="center">280</td> </tr> ．   ．   ．   (可無限增加商品)   ．   ．   ．</tbody></table>

最後加入

$(document).ready(function() {  $('#example').dataTable( {   "fnRowCallback": function( nRow, aData, iDisplayIndex ) {    nRow.className = nRow.className + aData[4];    return nRow;   },   "aoData": [    null,    null,    { "bVisible": false, "bSearchable": false },    { "sClass": "center" },    { "sClass": "center" }   ]  } ); } );

呈現效果：