【JQuery】DataTables–Table功能應用
使用JQuery前，需要引用Jquery元件及DataTables元件。
DataTables是一個強大又方便的元件，替程式設計師省下不少時間與精力，舉凡排序、分頁、關鍵字搜尋、顏色區分等功能皆可以達成。可以說是Table中常用到的功能，只要寫幾行code即可完成。此次引用官網範列，來作簡單說明，當然可以搭配AJAX、陣列方式作延伸變化，詳情見官網。
HTML 頁面(官網範例引用)︰
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<!-- 頁首標題 start -->
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<!-- 頁首標題 end -->
<!-- 內容 start -->
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
....內容省略之....
</tbody>
<!-- 內容 end -->
<!-- 頁尾標題 start -->
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<!-- 頁尾標題 end -->
</table>
</div>
Javascript︰
<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();
} );
</script>
CSS(官網範例引用)︰
若不喜歡Tables配色的話，可以拿官網CSS範本檔作修改。
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
</style>
註︰以上檔案路徑僅供參考，適情況修改之。
執行畫面︰
參考資源︰
DataTables官網
留言
張貼留言