官方網站及其下載地址：http:/www.datatables.NET
當前最新版爲1.10.2，讀者可點此本站下載。
其主要特點如下：
1.自動分頁處理
2.即時表格數據過濾
3.數據排序以及數據類型自動檢測
4.自動處理列寬度
5.可通過CSS定製樣式
6.支持隱藏列
7.易用
8.可擴展性和靈活性
9.國際化
10.動態創建表格
11.免費的
最後講講 各各屬性（主要添加的位置）
//$(document).ready(function() { //$('#example').dataTable( {//加載 //"bPaginate": true,//分頁按鈕 //"bLengthChange": true,//每行顯示記錄數 //"bFilter": true,//搜索欄 //"bSort": true,//排序 //"bInfo": true,//Showing 1 to 10 of 23 entries 總記錄數沒也顯示多少等信息 //"bAutoWidth": true } );//} ); //$(document).ready(function() { //$('#example').dataTable( { //"aaSorting": [[ 4, "desc" ]]//給列表排序 ，第一個參數表示數組 。4 就是css grade那列。第二個參數爲 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 //保存狀態到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" 添加個國際化的文件就可以。 名字隨便 路徑對了就可以。我寫的國際化文件內容如下，可以直接複製到txt中使用.
{"sProcessing": "Bitte warten...","sLengthMenu": "顯示_MENU_條 ","sZeroRecords": "沒有您要搜索的內容","sInfo": "從_START_ 到 _END_ 條記錄——總記錄數爲 _TOTAL_ 條","sInfoEmpty": "記錄數爲0","sInfoFiltered": "(全部記錄數 _MAX_ 條)","sInfoPostFix": "","sSearch": "搜索","sUrl": "","oPaginate": {"sFirst": "第一頁","sPrevious": " 上一頁 ","sNext": " 下一頁 ","sLast": " 最後一頁 "}}
// $("#sample_1").dataTable({
// "bPaginate": true, //開關，是否顯示分頁器
// "bInfo": true, //開關，是否顯示錶格的一些信息
// // "bFilter": true, //開關，是否啓用客戶端過濾器
// // "sDom": "<>lfrtip<>",
// // "bAutoWith": false,
// // "bDeferRender": false,
// // "bJQueryUI": false, //開關，是否啓用JQueryUI風格
// // "bLengthChange": true, //開關，是否顯示每頁大小的下拉框
// // "bProcessing": true,
// // "bScrollInfinite": false,
// // "sScrollY": "800px", //是否開啓垂直滾動，以及指定滾動區域大小,可設值：'disabled','2000px'
// // "bSort": true, //開關，是否啓用各列具有按列排序的功能
// // "bSortClasses": true,
// // "bStateSave": false, //開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，
// //打開了這個記錄後，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態都是保存下來的- ------當值爲true時aoColumnDefs不能隱藏列
// // "sScrollX": "50%", //是否開啓水平滾動，以及指定滾動區域大小,可設值：'disabled','2000%'
// // "aaSorting": [[0, "asc"]],
// // "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}],//隱藏列
// // "sDom": '<"H"if>t<"F"if>',
// // "bAutoWidth": false, //自適應寬度
// // "aaSorting": [[1, "asc"]],
// // "sPaginationType": "full_numbers",
// "oLanguage": {
// "sProcessing": "正在加載中......",
// "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
// "sZeroRecords": "對不起，查詢不到相關數據！",
// "sEmptyTable": "表中無數據存在！",
// "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
// "sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",
// "sSearch": "搜索",
// "oPaginate": {
// "sFirst": "首頁",
// "sPrevious": "上一頁",
// "sNext": "下一頁",
// "sLast": "末頁"
// }
// } //多語言配置
// });