jqurey datatables屬性
阿新 • • 發佈：2017-05-27
google 速度 ray 2個 start 單獨 font 好的 數據源
$(‘selector‘).dataTable( { /* * 默認為true * 是否自動計算列寬，計算列寬會花費一些時間，如果列寬通過aoColumns傳遞，可以關閉該屬性作為優化 */ "bAutoWidth":true, /* * 默認為false * 是否延遲渲染，當用Ajax或者js方式加載數據時開啟延遲渲染會帶來很大的速度提升 * 當該屬性設置為true時，表格每一行新增的元素只有在需要被畫出來時才會被DataTable創建出來 */ "bDeferRender":false, /* * 默認為true * 是否對數據進行過濾，數據過濾是十分靈活的，允許終端用戶輸入多個用空格分隔開的關鍵字 * 匹配包含這些關鍵字的行，即使關鍵字的順序不是用戶輸入的順序，過濾操作會跨列進行匹配，關鍵字可以分布在一行中不同的列 * 要註意的是如果你想在DataTable中使用過濾，該選項必須設置為true，如果想移除默認過濾輸入框但是保留過濾功能，請設置為false(API沒寫，推測是false) */ "bFilter":true, /* * 默認為true * 是否顯示表格信息，是指當前頁面上顯示的數據的信息，如果有過濾操作執行，也會顯示過濾操作的信息 */ "bInfo":true, /* * 默認為fasle * 是否開啟jQuery UI ThemeRoller支持，需要一些ThemeRoller使用的標記，這些標記有些與DataTable傳統使用的有輕微的差異，有些是額外附加的 */ "bJQueryUI":false, /* * 默認為true * 是否允許終端用戶從一個選擇列表中選擇分頁的頁數，頁數為10，25，50和100，需要分頁組件bPaginate的支持 */ "bLengthChange":false, /* * 默認為true * 是否開啟分頁功能,即使設置為false,仍然會有一個默認的<前進,後退>分頁組件 */ "bPaginage":true, /* * 默認為false * 當表格在處理的時候（比如排序操作）是否顯示“處理中...” * 當表格的數據中的數據過多以至於對其中的記錄進行排序時會消耗足以被察覺的時間的時候，該選項會有些用處 */ "bProcessing":false, /* * 默認為false * 是否開啟不限制長度的滾動條（和sScrollY屬性結合使用），不限制長度的滾動條意味著當用戶拖動滾動條的時候DataTable會不斷加載數據 * 當數據集十分大的時候會有些用處，該選項無法和分頁選項同時使用，分頁選項會被自動禁止，註意，額外推薦的滾動條會優先與該選項 */ "bScrollInfinite":false, /* * 默認為false * 配置DataTable使用服務器端處理，註意，sAjaxSource參數必須指定，以便給DataTable一個為每一行獲取數據的數據源 */ "bServerSide":false, /* * 默認為true * 是否開啟列排序，對單獨列的設置在每一列的bSortable選項中指定 */ "bSort":true, /* * 默認為true * 是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，可以切換其背景顏色 * 該選項作為一個來回切換的屬性會增加執行時間（當class被移除和添加的時候） * 當對大數據集進行排序的時候你或許希望關閉該選項 */ "bSortClasses":true, /* * 默認為false * 是否開啟狀態保存，當選項開啟的時候會使用一個cookie保存表格展示的信息的狀態，例如分頁信息，展示長度，過濾和排序等 * 這樣當終端用戶重新加載這個頁面的時候可以使用以前的設置 */ "bStateSave":false, /* * 默認為空字符串，即：無效 * 是否開啟水平滾動，當一個表格過於寬以至於無法放入一個布局的時候，或者表格有太多列的時候，你可以開啟該選項 * 從而在一個可橫向滾動的視圖裏面展示表格，該屬性可以是css設置，或者一個數字（作為像素量度來使用） */ "sScrollX":"100%", /* * 默認為空字符串，即：無效 * 是否開啟垂直滾動，垂直滾動會驅使DataTable設置為給定的長度，任何溢出到當前視圖之外的數據可以通過垂直滾動進行察看 * 當在小範圍區域中顯示大量數據的時候，可以在分頁和垂直滾動中選擇一種方式，該屬性可以是css設置，或者一個數字（作為像素量度來使用） */ "sScrollY":"100%", /* * 自定義語言設置 */ "oLanguage":{ "oAria":{ /* * 默認值為activate to sort column ascending * 當一列被按照升序排序的時候添加到表頭的ARIA標簽，註意列頭是這個字符串的前綴（？） */ "sSortAscending": " - click/return to sort ascending", /* * 默認值為activate to sort column ascending * 當一列被按照升序降序的時候添加到表頭的ARIA標簽，註意列頭是這個字符串的前綴（？） */ "sSortDescending": " - click/return to sort descending" }, "oPaginate": { /* * 默認值為First * 當使用全數字類型的分頁組件的時候，到第一頁按鈕上的文字 */ "sFirst": "First page", /* * 默認值為Last * 當使用全數字類型的分頁組件的時候，到最後一頁按鈕上的文字 */ "sLast": "Last page", /* * 默認值為Next * 當使用全數字類型的分頁組件的時候，到下一頁按鈕上的文字 */ "sNext": "Next page", /* * 默認值為Previous * 當使用全數字類型的分頁組件的時候，到前一頁按鈕上的文字 */ "sPrevious": "Previous page" }, /* * 默認值activate to sort column ascending為 * 當表格中沒有數據（無視因為過濾導致的沒有數據）時，該字符串年優先與sZeroRecords顯示 * 註意這是個可選參數，如果沒有指定，sZeroRecrods會被使用（既不是默認值也不是給定的值） */ "sEmptyTable": "No data available in table", /* * 默認值為Showing _START_ to _END_ of _TOTAL_ entries * 該屬性給終端用戶提供當前頁面的展示信息，字符串中的變量會隨著表格的更新被動態替換，而且可以被任意移動和刪除 */ "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)", /* * 默認值為Showing 0 to 0 of 0 entries * 當表格中沒有數據時展示的表格信息，通常情況下格式會符合sInfo的格式 */ "sInfoEmpty": "No entries to show", /* * 默認值為(filtered from _MAX_ total entries) * 當用戶過濾表格中的信息的時候，該字符串會被附加到信息字符串的後面，從而給出過濾器強度的直觀概念 */ "sInfoFiltered": " - filtering from _MAX_ records", /* * 默認值為空字符串 * 使用該屬性可以很方便的向表格信息字符串中添加額外的信息，被添加的信息在任何時候都會被附加到表格信息組件的後面 * sInfoEmpty和sInfoFiltered可以以任何被使用的方式進行結合 */ "sInfoPostFix": "All records shown are derived from real information.", /* * 默認值為‘,‘ * DataTable有內建的格式化數字的工具，可以用來格式化表格信息中較大的數字 * 默認情況下會自動調用，可以使用該選項來自定義分割的字符 */ "sInfoThousands": "‘", /* * 默認值為Show _MENU_ entries * 描述當分頁組件的下拉菜單的選項被改變的時候發生的動作，‘_MENU_‘變量會被替換為默認的10，25，50，100 * 如果需要的話可以被自定義的下拉組件替換 */ "sLengthMenu": "Display _MENU_ records", /* * 默認值為Loading... * 當使用Ajax數據源和表格在第一次被加載搜集數據的時候顯示的字符串，該信息在一個空行顯示 * 向終端用戶指明數據正在被加載，註意該參數在從服務器加載的時候無效，只有Ajax和客戶端處理的時候有效 */ "sLoadingRecords": "Please wait - loading...", /* * 默認值為Processing... * 當表格處理用戶動作（例如排序或者類似行為）的時候顯示的字符串 */ "sProcessing": "DataTables is currently busy", /* * 默認為Search: * 描述用戶在輸入框輸入過濾條件時的動作，變量‘_INPUT_‘,如果用在字符串中 * DataTable會使用用戶輸入的過濾條件替換_INPUT_為HTML文本組件，從而可以支配它（即用戶輸入的過濾條件）出現在信息字符串中的位置 * 如果變量沒有指定，用戶輸入會自動添加到字符串後面 */ "sSearch": "Apply filter _INPUT_ to table", /* * 默認值為空字符串，即：無效 * 所有語言信息可以被存儲在服務器端的文件中，DataTable可以根據該參數指定的URL去尋找 * 必須保存語言文件的URL信息，必須是JSON格式，對象和初始化中使用的oLanguage對象具有相同的屬性 * 請參考示例文件來了解該參數是如何工作的 */ "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt", /* * 默認值為No matching records found * 當對數據進行過濾操作後，如果沒有要顯示的數據，會在表格記錄中顯示該字符串 * sEmptyTable只在表格中沒有數據的時候顯示，忽略過濾操作 */ "sZeroRecords": "No records to display" } }); }); /*------------------------------------------------Options------------------------------------------------*/ /* * bDestroy * 默認為false * 使用傳遞的新的初始化對象中的屬性構造一個新的表格，並替換一個匹配指定的選擇器的表格 * 如果沒有匹配到表格，新的表格會被作為一個普通表格被構建 */ $(‘selector‘).dataTable({ "bFilter": false, "bDestroy": true }); /* * bRetrieve * 默認為false * 使用指定的選擇器檢索表格，註意，如果表格已經被初始化，該參數會直接返回已經被創建的對象 * 並不會顧及你傳遞進來的初始化參數對象的變化，將該參數設置為true說明你確認已經明白這一點 * 如果你需要的話，bDestroy可以用來重新初始化表格 */ $(document).ready(function(){ initTable(); tableActions(); }); function initTable() { return $(‘#example‘).dataTable( { "sScrollY": "200px", "bPaginate": false, "bRetrieve": true }); } function tableActions() { var oTable = initTable(); // perform API operations with oTable } /* * bScrollAutoCss * 默認為true * 指明DataTable中滾動的標題元素是否被允許設置內邊距和外邊距等 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bScrollAutoCss": false, "sScrollY": "200px" }); }); /* * bScrollCollapse * 默認為false * 當垂直滾動被允許的時候，DataTable會強制表格視圖在任何時候都是給定的高度（對布局有利） * 不過，當把數據集過濾到十分小的時候看起來會很古怪，而且頁腳會留在最下面 * 當結果集的高度比給定的高度小時該參數會使表格高度自適應 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sScrollY": "200", "bScrollCollapse": true }); }); /* * bSortCellsTop * 默認為false * 是否允許DataTable使用頂部（默認為true）的單元格，或者底部（默認為false）的單元格，當使用復合表頭的時候會有些用處 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bSortCellsTop": true }); }); /* * iCookieDuration * 默認為7200秒（2個小時） * 設置用來存儲會話信息的cookie的持續時間，單位是秒 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "iCookieDuration": 60*60*24 // 1 day }); }) /* * iDeferLoading * 默認為null * 當選項被開啟的時候，DataTable在非加載第一次的時候不會向服務器請求數據，而是會使用頁面上的已有數據（不會應用排序等） * 因此在加載的時候保留一個XmlHttpRequest，iDeferLoading被用來指明需要延遲加載，而且也用來通知DataTable一個滿的表格有多少條數據 * 信息元素和分頁會被正確保留 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "iDeferLoading": 57 }); }); /* * iDisplayLength * 默認為10 * 單頁顯示的數據的條數，如果bLengthChange屬性被開啟，終端用戶可以通過一個彈出菜單重寫該數值 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "iDeferLoading": 57 }); }); /* * iDisplayStart * 默認為0 * 當開啟分頁的時候，定義展示的記錄的起始序號，不是頁數，因此如果你每個分頁有10條記錄而且想從第三頁開始 * 需要把該參數指定為20 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "iDisplayStart": 20 }); }) /* * iScrollLoadGap * 默認為100 * 滾動余界是指DataTable在當前頁面還有多少條數據可供滾動時自動加載新的數據，你可能希望指定一個足夠大的余界 * 以便滾動加載數據的操作對用戶來說是平滑的，同時也不會大到加載比需要的多的多的數據 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bScrollInfinite": true, "bScrollCollapse": true, "sScrollY": "200px", "iScrollLoadGap": 50 }); }); /* * iTabIndex * 默認為0 * 默認情況下DataTable允許通過為需要鍵盤導航的元素添加tabindex屬性來進行導航（排序、分頁、過濾） * 允許你通過tab鍵切換控制組件，使用回車鍵去激活他們，默認為0表示按照文檔流來切換 * 如果需要的話，你可以使用該參數重寫切換順序，使用-1來禁止內建的鍵盤導航 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "iTabIndex": 1 }); }); /* * oSearch * 無默認值 * 該參數允許你在初始化的時候使用已經定義的全局過濾狀態，sSearch對象必須被定義，但是所有的其它選項都是可選的 * 當bRegex為true的時候，搜索字符串會被當作正則表達式，當為false（默認）的時候，會被直接當作一個字符串 * 當bSmart為true的時候，DataTable會使用使用靈活過濾策略（匹配任何可能的數據），為false的時候不會這樣做 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "oSearch": {"sSearch": "Initial search"} }); }) /* * sAjaxDataProp * 默認為aaData * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性作為數據源 * 該選項允許變更數據源的名稱，你可以使用JavaScript的點號對象表示法去訪問多級網狀數據源 */ // Get data from { "data": [...] } $(document).ready(function(){ var oTable = $(‘#example‘).dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data" }); }); // Get data from { "data": { "inner": [...] } } $(document).ready(function(){ var oTable = $(‘#example‘).dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data.inner" }); }); /* * sAjaxSource * 默認為null * 該參數用來向DataTable指定加載的外部數據源（如果想使用現有的數據，請使用aData） * 可以簡單的提供一個可以用來獲得數據url或者JSON對象，該對象必須包含aaData，作為表格的數據源 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" }); }) /* * sCookiePrefix * 默認為SpryMedia_DataTables_ * 該參數可以用來重寫DataTable默認指定的用來存儲狀態信息的cookie的前綴 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sCookiePrefix": "my_datatable_", }); }); /* * sDom * 默認值為lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) * 該初始化屬性用來指定你想把各種控制組件註入到dom節點的位置（比如你想把分頁組件放到表格的頂部） * DIV元素（帶或者不帶自定的class）可以添加目標樣式，下列語法被使用 * 可供使用的選項 * ‘l‘ - 長度改變 * ‘f‘ - 過濾輸入 * ‘t‘ - 表格 * ‘i‘ - 信息 * ‘p‘ - 分頁 * ‘r‘ - 處理 * 可供使用的常量 * ‘H‘ - jQueryUI theme "header" classes(‘fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix‘) * ‘F‘ - jQueryUI theme "footer" classes (‘fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix‘) * 需要的語法 * ‘<‘ 和 ‘>‘ - div元素 * ‘<"class" and ‘>‘ - 帶有class屬性的div元素 * ‘<"#id" and ‘>‘ - 帶有id屬性的div元素 * 例子 * ‘<"wrapper"flipt>‘ * ‘<lf<t>ip>‘ */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sDom": ‘<"top"i>rt<"bottom"flp><"clear"&lgt;‘ }); }); /* * sPaginationType * 默認為two_button * DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展現給終端用戶不同的控制方式 * 可以通過API增加策略 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sPaginationType": "full_numbers" }); }) /* * sScrollXInner * 默認為空字符串，即：無效 * 當橫向滾動可用的時候，該屬性可以用來強制DataTable的寬度比需要的更長 * 比如你需要表格彼此相隔適宜，該變量可以用來使表格變大，而且強制滾動 * 該該屬性可以是css設置，或者一個數字（作為像素量度來使用） */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sScrollX": "100%", "sScrollXInner": "110%" }); }); /* * sServerMethod * 默認值為GET * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "bServerSide": true, "sAjaxSource": "scripts/post.php", "sServerMethod": "POST" }); }); /*------------------------------------------------Callback------------------------------------------------*/ /* * fnCookieCallback * 無默認值 * 當DataTable的狀態保留可用時，自定義被保存的cookie和參數。只要cookie被修改就會調用此方法 * 該方法需要返回一個格式良好的cookie字符串，註意數據對象是以Javascript對象的形式傳遞進來的，必須轉換成字符串，例如JSON格式 */ $(document).ready(function (){ $(‘#example‘).dataTable({ "fnCookieCallback": function (sName, oData, sExpires, sPath) { // Customise oData or sName or whatever else here return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath; } }); }); /* * fnCreatedRow * 無默認值 * 當一個新的TR元素（並且所有TD子元素被插入）被創建或者被作為一個DOM資源被註冊時調用該函數 * 允許操作該TR元素 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "fnCreatedRow": function( nRow, aData, iDataIndex ){ // Bold the grade for all ‘A‘ grade browsers if ( aData[4] == "A" ) { $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ ); } } }); }); /* * fnDrawCallback * 無默認值 * 每當draw事件發生時調用該函數，允許你動態編輯新建的dom對象的任何屬性 */ $(document).ready( function(){ $(‘#example‘).dataTable({ "fnDrawCallback": function(){ alert( ‘DataTables has redrawn the table‘ ); } }); }); /* * fnFooterCallback * 無默認值 * 與fnHeaderCallback()完全相同，只是該函數允許你在每一個draw時間發生時修改頁腳 */ $(document).ready( function(){ $(‘#example‘).dataTable({ "fnDrawCallback": function() { alert( ‘DataTables has redrawn the table‘ ); } }); }); /* * fnFormatNumber * 無默認值 * 當渲染表格信息（例如：顯示57條記錄中的1-10條）中大的數字時 * 為了方便用戶，DataTable會使用逗號分割每千單位（例如1000000會被渲染為1,000,000） * 該函數會重寫DataTable默認使用的策略 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "fnFormatNumber": function ( iIn ) { if ( iIn < 1000 ) { return iIn; } else { var s=(iIn+""), a=s.split(""), out="", iLen=s.length; for ( var i=0 ; i<iLen ; i++ ) { if ( i%3 === 0 && i !== 0 ) { out = "‘"+out; } out = a[iLen-i-1]+out; } } return out; }; }); }); /* * fnHeaderCallback * 無默認值 * 每當draw事件發生時調用該函數，允許你動態編輯表頭行，可以用來計算和展示關於表格的有用的信息 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "fnFormatNumber": function ( iIn ) { if ( iIn < 1000 ) { return iIn; } else { var s=(iIn+""), a=s.split(""), out="", iLen=s.length; for ( var i=0 ; i<iLen ; i++ ) { if ( i%3 === 0 && i !== 0 ) { out = "‘"+out; } out = a[iLen-i-1]+out; } } return out; }; }); }); /* * fnInfoCallback * 無默認值 * 信息元素可以用來傳輸表格當前狀態的信息，盡管DataTable提供的國際化的選項在處理大多數自定義情況時已經相當方便了 * 或許你有時仍然希望自定義深層的字符串,該函數會滿足你的需要 */ $(‘#example‘).dataTable( { "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) { return iStart +" to "+ iEnd; } }); /* * fnInitComplete * 無默認值 * 當表格被初始化後調用該函數，通常DataTable會被持續初始化，並不需要該函數 * 可是，當使用異步的XmlHttpRequest從外部獲得語言信息時，初始化並不是持續的 */ $(document).ready( function(){ $(‘#example‘).dataTable({ "fnInitComplete": function(oSettings, json) { alert( ‘DataTables has finished its initialisation.‘ ); } }); }) /* * fnPreDrawCallback * 無默認值 * 在每一個表格draw事件發生前調用該函數，通過返回false來取消draw事件 * 其它任何的返回值，包括undefined都會導致draw事件的發生 */ $(document).ready( function(){ $(‘#example‘).dataTable({ "fnPreDrawCallback": function( oSettings ) { if ( $(‘#test‘).val() == 1 ) { return false; } } }); }); /* * fnRowCallback * 無默認值 * 你可以通過該函數在每一個表格繪制事件發生之後，渲染到屏幕上之前，向表格裏的每一行傳遞‘處理過程‘ * 該函數可以用來設置行的class名字等 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { // Bold the grade for all ‘A‘ grade browsers if ( aData[4] == "A" ) { $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ ); } } }); }); /* * fnServerData * 無默認值 * 你可以使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用 * 例如你可以使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據 */ // POST data to server $(document).ready(function(){ $(‘#example‘).dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "xhr.php", "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": ‘json‘, "type": "POST", "url": sSource, "data": aoData, "success": fnCallback } ); } }); }); /* * fnServerParams * 無默認值 * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單 * 傳遞進來的參數是DataTable建立的數據集合，你可以根據需要添加或者修改該集合 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "fnServerParams": function ( aoData ) { aoData.push( { "name": "more_data", "value": "my_value" } ); } }); }); /* * fnStateLoad * 無默認值 * 加載表格狀態，使用該函數你可以定義狀態信息加載的位置和方式，默認情況下DataTable會從cookie中加載 * 不過你或許希望使用本地存儲（HTML5支持），或者服務端數據庫 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateSave": function (oSettings, oData) { var o; // Send an Ajax request to the server to get the data. Note that // this is a synchronous request. $.ajax( { "url": "/state_load", "async": false, "dataType": "json", "success": function (json) { o = json; } } ); return o; } }); }); /* * fnStateLoadParams * 無默認值 * 該回調可以用來在加載狀態信息之前編輯狀態信息 * 函數在表格從存儲的數據加載狀態信息時調用，在表格<當前使用的設置對象>被<從保存信息中加載的設置對象>修改以前調用 * 註意作為插件開發者，你應該使用‘stateLoadParams‘事件去加載plug-in的參數 */ // Remove a saved filter, so filtering is never loaded $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateLoadParams": function (oSettings, oData) { oData.oFilter.sSearch = ""; }); }); // Disallow state loading by returning false $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateLoadParams": function (oSettings, oData) { return false; }); }); /* * fnStateLoaded * 無默認值 * 在表格狀態被狀態存儲方法讀取和DataTable設置對象被修改時調用，作為被狀態信息被加載的結果 */ // Show an alert with the filtering value that was saved $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateLoaded": function (oSettings, oData) { alert( ‘Saved filter was: ‘+oData.oFilter.sSearch ); }); }); /* * fnStateSave * 無默認值 * 保存表格狀態，使用該函數你可以定義狀態信息保存的位置和方式，默認情況下DataTable會保存在cookie中 * 不過你或許希望使用本地存儲（HTML5支持），或者服務端數據庫 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateSave": function (oSettings, oData) { // Send an Ajax request to the server with the state object $.ajax( { "url": "/state_save", "data": oData, "dataType": "json", "method": "POST" "success": function () {} }); } }); }); /* * fnStateSaveParams * 無默認值 * 該回調允許你編輯被保存的狀態信息，在表格改變了狀態信息需要保存的時候調用 * 可以使用該回調在保存狀態信息的對象被保存以前對其進行修改，包括添加或者其它狀態屬性或者修改 */ // Remove a saved filter, so filtering is never saved $(document).ready(function(){ $(‘#example‘).dataTable({ "bStateSave": true, "fnStateLoadParams": function (oSettings, oData) { oData.oFilter.sSearch = ""; }); }); /*------------------------------------------------Columns------------------------------------------------*/ /* * aDataSort * 默認為null,自動使用列序號作為默認 * 在排序一列的時候同時將其它幾列也排序，例如名和姓作為多列排序 */ // Using aoColumnDefs $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumnDefs": [ { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] }, { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] }, { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] } ] }); }); // Using aoColumns $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumns": [ { "aDataSort": [ 0, 1 ] }, { "aDataSort": [ 1, 0 ] }, { "aDataSort": [ 2, 3, 4 ] }, null, null ] }); }); /* * asSorting * 默認為[ ‘asc‘, ‘desc‘ ] * 你可以通過該參數控制默認排序的方向，甚至改變排序處理器的行為（例如：只允許升序排序） */ // Using aoColumnDefs $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumnDefs": [ { "asSorting": [ "asc" ], "aTargets": [ 1 ] }, { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] }, { "asSorting": [ "desc" ], "aTargets": [ 3 ] } ] }); }); // Using aoColumns $(document).ready(function(){ $(‘#example‘).dataTable( { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ "desc" ] }, null ] }); }); /* * bSearchable * 默認為true * 是否在列上應用過濾 */ // Using aoColumnDefs $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumnDefs": [ { "bSearchable": false, "aTargets": [ 0 ] } ]} ); }); // Using aoColumns $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumns": [ { "bSearchable": false }, null, null, null, null ] }); }); /* * bSortable * 默認為true * 是否在某一列上開啟排序 */ // Using aoColumnDefs $(document).ready(function(){ $(‘#example‘).dataTable({ "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ] }); }); // Using aoColumns $(document).ready(function(){ $(‘#example‘).dataTable( { "aoColumns": [ { "bSortable": false }, null, null, null, null ] }); }); /* * bUseRendered * 默認為true * 當對一列使用使用fnRender時，你或許希望使用原始的數據（渲染以前）去排序或者過濾（默認是使用用戶看到的渲染過的數據） * 或許對日期類型有些用處，註意，現在建議使用mDataProp作為函數並且使用該函數提供的type參數，來允許不同的數據被用來排序，過濾，展現和類型檢測 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "fnRender": function ( oObj ) { return oObj.aData[0] +‘ ‘+ oObj.aData[3]; }, "bUseRendered": false, "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "fnRender": function ( oObj ) { return oObj.aData[0] +‘ ‘+ oObj.aData[3]; }, "bUseRendered": false }, null, null, null, null ] } ); } ); /* * bVisible * 默認值為true * 是否展示某一列 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "bVisible": false }, null, null, null, null ] } ); } ); /* * fnCreatedCell * 無默認值 * 每當新的單元格被建立（Ajax源等）或者處理輸入（DOM源）時，開發者可定義的函數會被調用 * 該屬性用作fnRender的補充來允許你修改在fnRender函數調用之後新建的DOM元素（例如增加背景顏色） */ $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "aTargets": [3], "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { if ( sData == "1.7" ) { $(nTd).css(‘color‘, ‘blue‘) } } } ] }); } ); /* * fnRender * 無默認值 * 自定義列中每個單元格被展示的時候調用的展示函數 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "fnRender": function ( o, val ) { return o.aData[0] +‘ ‘+ o.aData[3]; }, "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "fnRender": function ( o, val ) { return o.aData[0] +‘ ‘+ o.aData[3]; } }, null, null, null, null ] } ); } ); /* * iDataSort * 默認值為-1，使用自動計算的列標 * 當選擇該列進行排序的時候，你希望調用排序操作的列的列號，該參數可以用來按隱藏列排序 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "iDataSort": 1, "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "iDataSort": 1 }, null, null, null, null ] } ); } ); /* * mDataProp * 默認為null,使用自動計算的列標 * 該屬性可以從任何JSON格式數據源讀取屬性，包括深層網狀的對象和屬性， * 有幾種不同的傳遞方式可以影響mDataProp的行為 * 整型：被當作數據源的數組下表，是DataTable使用的默認行為（每列遞增） * 字符串類型：被當作從數據源獲取的對象的屬性名，註意你可以使用Javascript點號訪問符去訪問深層次的屬性或數組 * null：sDafaultContent選項會被使用到單元格上，（默認是空字符串，當生成可編輯列、可刪除列的時候可以使用該屬性） * 函數：當表格獲取或者設置單元格時被調用的函數，函數有三個參數 * {array|object}:該行的數據源 * {string}:調用數據請求的類型，設置數據時是‘set‘，收集數據時是‘filter‘,‘display‘,‘type‘,‘sort‘ * {*}:當第二個參數是set的時候，要被設置的數據 * 當類型是‘set‘的時候，該函數不需要返回一個值，除此之外，返回值是可以用來請求數據的 */ // Read table data from objects $(document).ready(function() { var oTable = $(‘#example‘).dataTable( { "sAjaxSource": "sources/deep.txt", "aoColumns": [ { "mDataProp": "engine" }, { "mDataProp": "browser" }, { "mDataProp": "platform.inner" }, { "mDataProp": "platform.details.0" }, { "mDataProp": "platform.details.1" } ] } ); } ); // Using mDataProp as a function to provide different information for // sorting, filtering and display. In this case, currency (price) $(document).ready(function() { var oTable = $(‘#example‘).dataTable( { "aoColumnDefs": [ { "aTargets": [ 0 ], "mDataProp": function ( source, type, val ) { if (type === ‘set‘) { source.price = val; // Store the computed dislay and filter values for efficiency source.price_display = val=="" ? "" : "$"+numberFormat(val); source.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val; return; } else if (type === ‘display‘) { return source.price_display; } else if (type === ‘filter‘) { return source.price_filter; } // ‘sort‘ and ‘type‘ both just use the integer return source.price; } ] } ); } ); /* * sClass * 默認值為空字符串 * 該列的每一個單元格被賦予的class */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sClass": "my_class", "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "sClass": "my_class" }, null, null, null, null ] } ); } ); /* * sContentPadding * 默認值為空字符串 * 當DataTable計算分配給每一列的列寬的時候，會尋找每一列中最長的字符串，然後構建一個臨時表 * 從臨時表中讀取寬度，這樣帶來的問題是‘mmm‘會比‘iiii‘的長度長很多，但是後者的長度要大 * 這樣計算值會出現偏差（正確的處理然後放入DOM對象再測量長度會相當的慢），我們提供了這個選項作為一個解決方法 * 它會把他的值添加到該列最長的值的後面來計算列寬，通常你不需要該屬性，該屬性也沒有被寫到DataTables.net的文檔中 */ // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ null, null, null, { "sContentPadding": "mmm" } ] } ); } ); /* * sDefaultContent * 默認為空字符串 * 允許給列值一個默認值，只要發現null值就會顯示默認值 * 可以由mDataProp設置為null或者數據源是null引起 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "mDataProp": null, "sDefaultContent": "Edit", "aTargets": [ -1 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ null, null, null, { "mDataProp": null, "sDefaultContent": "Edit" } ] } ); } ); /* * sName * 默認值為空字符串 * 該參數只有使用在服務器端處理的時候調用，在了解客戶端展示了哪些列的時候十分有用 * 然後與數據庫字段建立映射，當被定義時，如果服務器端返回的信息的順序不是期望的順序，也可以使用名字去區分 * 使用這種方式的好處是：用戶在客戶端交換了列，你的服務器端代碼不用更新 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sName": "engine", "aTargets": [ 0 ] }, { "sName": "browser", "aTargets": [ 1 ] }, { "sName": "platform", "aTargets": [ 2 ] }, { "sName": "version", "aTargets": [ 3 ] }, { "sName": "grade", "aTargets": [ 4 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "sName": "engine" }, { "sName": "browser" }, { "sName": "platform" }, { "sName": "version" }, { "sName": "grade" } ] } ); } ); /* * sSortDataType * 默認值為std * 為排序操作定義可以用來在排序前讀取實時表格信息（更新內部緩存版本）的數據源的類型 * 允許排序事件發生在用戶可編輯的元素上，例如輸入框 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] }, { "sType": "numeric", "aTargets": [ 3 ] }, { "sSortDataType": "dom-select", "aTargets": [ 4 ] }, { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ null, null, { "sSortDataType": "dom-text" }, { "sSortDataType": "dom-text", "sType": "numeric" }, { "sSortDataType": "dom-select" }, { "sSortDataType": "dom-checkbox" } ] } ); } ); /* * sTitle * 默認值為null,從TH標簽讀取 * 列名 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sTitle": "My column title", "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "sTitle": "My column title" }, null, null, null, null ] } ); } ); /* * sType * 默認值為null,從弱引用數據中自動判斷 * 允許你指定該列數據按什麽類型來排序，目前有四種類型（字符串，數字，日期和html（在排序前會自動除去HTML標記））可選 * 註意只有能夠被Javascript的Date對象接受的格式化日期字符串才會被當作日期類型接受，例如"Mar 26, 2008 5:03 PM" * 默認是使用html類型，更多類型可以通過插件添加 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sType": "html", "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "sType": "html" }, null, null, null, null ] } ); } ); /* * sWidth * 默認值為null,自動的 * 定義列的寬度，該參數可以接受CSS定義（3em,20px等），DataTable對沒有通過該接口指定寬度的列使用靈活寬度 * 從而保證表格是可被讀的 */ // Using aoColumnDefs $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumnDefs": [ { "sWidth": "20%", "aTargets": [ 0 ] } ] } ); } ); // Using aoColumns $(document).ready(function() { $(‘#example‘).dataTable( { "aoColumns": [ { "sWidth": "20%" }, null, null, null, null ] } ); } ); /*------------------------------------------------ServerSide------------------------------------------------*/ /* * bServerSide * 默認值false * 配置使用服務器端處理的DataTable，註意sAjaxSource參數必須指定，以便給DataTable一個獲取每行數據的數據源 */ $(document).ready( function () { $(‘#example‘).dataTable( { "bServerSide": true, "sAjaxSource": "xhr.php" } ); } ); /* * fnServerData * 無默認值 * 你可以使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用 * 例如你可以使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據 */ // POST data to server $(document).ready(function() { $(‘#example‘).dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "xhr.php", "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": ‘json‘, "type": "POST", "url": sSource, "data": aoData, "success": fnCallback } ); } } ); } ); /* * fnServerParams * 無默認值 * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單 * 傳遞進來的參數是DataTable建立的數據集合，你可以根據需要添加或者修改該集合 */ $(document).ready(function() { $(‘#example‘).dataTable( { "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "fnServerParams": function ( aoData ) { aoData.push( { "name": "more_data", "value": "my_value" } ); } } ); } ); /* * sAjaxDataProp * 默認為aaData * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性作為數據源 * 該選項允許變更數據源的名稱，你可以使用JavaScript的點號對象表示法去訪問多級網狀數據源 */ // Get data from { "data": [...] } $(document).ready(function() { var oTable = $(‘#example‘).dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data" } ); } ); // Get data from { "data": { "inner": [...] } } $(document).ready(function() { var oTable = $(‘#example‘).dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data.inner" } ); } ); /* * sAjaxSource * 默認為null * 該參數用來向DataTable指定加載的外部數據源（如果想使用現有的數據，請使用aData） * 可以簡單的提供一個可以用來獲得數據url或者JSON對象，該對象必須包含aaData，作為表格的數據源 */ $(document).ready(function(){ $(‘#example‘).dataTable( { "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" }); }) /* * sServerMethod * 默認值為GET * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式 */ $(document).ready(function(){ $(‘#example‘).dataTable({ "bServerSide": true, "sAjaxSource": "scripts/post.php", "sServerMethod": "POST" }); });
jqurey datatables屬性