DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強，這將增加先進的互動控制，支持任何HTML表格。
官方網(wǎng)站及其下載地址：http:/www.datatables.net
當前最新版為1.10.2，讀者可點此本站下載。
其主要特點如下：
1.自動分頁處理
2.即時表格數(shù)據(jù)過濾
3.數(shù)據(jù)排序以及數(shù)據(jù)類型自動檢測
4.自動處理列寬度
5.可通過CSS定制樣式
6.支持隱藏列
7.易用
8.可擴展性和靈活性
9.國際化
10.動態(tài)創(chuàng)建表格
11.免費的
使用方法：
首先看看如下代碼：
<title>DataTables example</title><style type="text/css" title="currentStyle">@import "../../media/css/demo_page.css";@import "../../media/css/demo_table.css";@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";</style><script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script><script type="text/javascript" charset="utf-8">
上述代碼中引入js和css文件。可以在demo里復制。注意路徑地址。
接著來看看如下代碼：
<script type="text/javascript" charset="utf-8">$(document).ready(function() {$('#example').dataTable( {"oLanguage": {"sUrl": "/SSS/dataTables/de_DE.txt"},"bStateSave": true,//"bJQueryUI": true, //使用jqueryui 。我用的時候顯示的不是很好"sPaginationType": "full_numbers"http://分頁} );} );</script></head><body id="dt_example">//此處為body的id<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式寫*<h1>物品種類管理</h1><div id="demo"><table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 別忘了<thead><tr><th>物品編號</th><th>物品名稱</th><th>物品單位</th><th>編輯狀態(tài)</th><th>隨便</th></tr></thead><tr class="gradeX">//此處可以是gradeA ,gradeX 等，但是gradeB 隔行換色 效果很好<td>Trident</td><td>InternetExplorer 4.0</td><td>Win 95+</td><td class="center">4</td><td class="center">X</td></tr><tr class="gradeC"><td>Trident</td><td>InternetExplorer 5.0</td><td>Win 95+</td><td class="center">5</td><td class="center">C</td></tr><tr class="gradeA"><td>Trident</td><td>InternetExplorer 5.5</td><td>Win 95+</td><td class="center">5.5</td><td class="center">A</td></tr></tbody><tfoot></tfoot> </table></div> </div> 上面就能創(chuàng)建出如圖的效果， 分頁。排序。等等。
最后講講 各各屬性（主要添加的位置）
//$(document).ready(function() { //$('#example').dataTable( {//加載 //"bPaginate": true,//分頁按鈕 //"bLengthChange": true,//每行顯示記錄數(shù) //"bFilter": true,//搜索欄 //"bSort": true,//排序 //"bInfo": true,//Showing 1 to 10 of 23 entries 總記錄數(shù)沒也顯示多少等信息 //"bAutoWidth": true } );//} );//$(document).ready(function() { //$('#example').dataTable( { //"aaSorting": [[ 4, "desc" ]]//給列表排序 ，第一個參數(shù)表示數(shù)組 。4 就是css grade那列。第二個參數(shù)為 desc或是asc //} );//} );//$(document).ready(function() { //$('#example').dataTable( { //"aoColumns": [ // /* Engine */ null, //默認 // /* Browser */ null, // /* Platform */ { "bSearchable": false, //不可參與搜索 // "bVisible": false },//不可見 // /* Version */ { "bVisible": false },//不可見 // /* Grade */ null //] } );//} );//$(document).ready(function() { //$('#example').dataTable({ //});//} );//$(document).ready(function() { //$('#example').dataTable( { //"sDom": '<"top"i>rt<"bottom"flp<"clear">'//這段是自定義布局沒搞明白挺復雜的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, <lf<t>ip> //} );//} );//$(document).ready(function() {// $('#example').dataTable( { // "bStateSave": true //保存狀態(tài)到cookie *************** 很重要 ， 當搜索的時候頁面一刷新會導致搜索的消失。使用這個屬性就可避免了 //} );//} );//$(document).ready(function() { //$('#example').dataTable( { //"sPaginationType": "full_numbers" //分頁，一共兩種樣式 另一種為two_button 是datatables默認 //} );//} );//$(document).ready(function() { //$('#example').dataTable( { //分頁信息 不是很難理解。 //"oLanguage": { //"sLengthMenu": "Display _MENU_ records per page", //"sZeroRecords": "Nothing found - sorry", //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records", //"sInfoEmtpy": "Showing 0 to 0 of 0 records", //"sInfoFiltered": "(filtered from _MAX_ total records)" //} //} );//} )$(document).ready(function() { oTable = $('#example').dataTable({ "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css "sPaginationType": "full_numbers" });} );默認的語言是英文的 當然可以國際化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加個國際化的文件就可以。 名字隨便 路徑對了就可以。我寫的國際化文件內(nèi)容如下，可以直接復制到txt中使用.
{"sProcessing": "Bitte warten...","sLengthMenu": "顯示_MENU_條 ","sZeroRecords": "沒有您要搜索的內(nèi)容","sInfo": "從_START_ 到 _END_ 條記錄――總記錄數(shù)為 _TOTAL_ 條","sInfoEmpty": "記錄數(shù)為0","sInfoFiltered": "(全部記錄數(shù) _MAX_ 條)","sInfoPostFix": "","sSearch": "搜索","sUrl": "","oPaginate": {"sFirst": "第一頁","sPrevious": " 上一頁 ","sNext": " 下一頁 ","sLast": " 最后一頁 "}}這些是datatables的基礎(chǔ)部分。比較容易掌握。
希望本文所述對大家jQuery程序設(shè)計的學習有所幫助。
新聞熱點
疑難解答
