- 作者：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" } ] } ); } );呈現效果：
