datatable參數和服務端ajax函數配置及說明__函數

來源:互聯網
上載者:User
上周因為需要使用了datatable,可是網上搜尋到的要麼就是一點點的參數介紹,要麼就是幾個回呼函數的介紹,極少數有比較全面的,所以把自己用到的總結了一下,這其中涉及到服務端的分頁,其實datatable都給我們整合好了,用起來是很方便的,話不多說,如下: 關於datatable使用詳解: 1、基本參數配置:
要注意的是,要被dataTable處理的table對象,必須有thead與tbody,而且,結構要規整(資料不一定要完整),這樣才能正確處理。以下是在進行dataTable綁定處理時候可以附加的參數:

屬性名稱 取值範圍 解釋
bAutoWidth true or false, default true 是否自動計算表格各列寬度
bDeferRender true or false, default false 用於渲染的一個參數
bFilter true or false, default true 開關,是否啟用用戶端過濾功能
bInfo true or false, default true 開關,是否顯示表格的一些資訊
bJQueryUI true or false, default false 是否使用jquery ui themeroller的風格
bLengthChange true or false, default true 開關,是否顯示一個每頁長度的選擇條(需要分頁器支援)
bPaginate true or false, default true 開關,是否顯示(使用)分頁器
bProcessing true or false, defualt false 開關,以指定當正在處理資料的時候,是否顯示“正在處理”這個提示資訊
bScrollInfinite true or false, default false 開關,以指定是否無限滾動(與sScrollY配合使用),在大資料量的時候很有用。當這個標誌為true的時候,分頁器就預設關閉
bSort true or false, default true 開關,是否讓各列具有按列排序功能
bSortClasses true or false, default true 開關,指定噹噹前列在排序時,是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3',開啟後,在處理大資料時,效能有所損失
bStateSave true or false, default false 開關,是否開啟用戶端狀態記錄功能。這個資料是記錄在cookies中的,開啟了這個記錄後,即使重新整理一次頁面,或重新開啟瀏覽器,之前的狀態都是儲存下來的
sScrollX 'disabled' or '100%' 類似的字串 是否開啟水平滾動,以及指定捲動區域大小
sScrollY 'disabled' or '200px' 類似的字串 是否開啟垂直滾動,以及指定捲動區域大小
-- -- --
選項    
aaSorting array array[int,string], 如[], [[0,'asc'], [0,'desc']] 指定按多列資料排序的依據
aaSortingFixed 同上 同上。唯一不同點是不能被使用者的自訂配置衝突
aLengthMenu default [10, 25, 50, 100],可以為一維數組,也可為二維數組,比如:[[10, 25, 50, -1], [10, 25, 50, "All"]] 這個為選擇每頁的條目數,當使用一個二維數組時,二維層面只能有兩個元素,第一個為顯示每頁條目數的選項,第二個是關於這些選項的解釋
aoSearchCols default null, 類似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] 給每個列單獨定義其初始化搜尋列表特性(這一塊還沒搞懂)
asStripClasses default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] 指定要被應用到各行的class風格,會自動迴圈
bDestroy true or false, default false 用於當要在同一個元素上執行新的dataTable綁定時,將之前的那個資料對象清除掉,換以新的對象設定
bRetrieve true or false, default false 用於指明當執行dataTable綁定時,是否返回DataTable對象
bScrollCollapse true or false, default false 指定適當的時候縮起滾動視圖
bSortCellsTop true or false, default false (未知的東東)
iCookieDuration 整數,預設7200,單位為秒 指定用於儲存用戶端資訊到cookie中的時間長度,超過這個時間後,自動到期
iDeferLoading 整數,預設為null 消極式載入,它的參數為要載入條目的數目,通常與bServerSide,sAjaxSource等配合使用
iDisplayLength 整數,預設為10 用於指定一屏顯示的條數,需開啟分頁器
iDisplayStart 整數,預設為0 用於指定從哪一條資料開始顯示到表格中去
iScrollLoadGap 整數,預設為100 用於指定當DataTable設定為滾動時,最多可以一屏顯示多少條資料
oSearch 預設{ "sSearch": "", "bRegex": false, "bSmart": true } 又是初始時指定搜尋參數相關的,有點複雜,沒搞懂目前
sAjaxDataProp 字串,default 'aaData' 指定當從服務端擷取表格式資料時,資料項目使用的名字
sAjaxSource URL字串,default null 指定要從哪個URL擷取資料
sCookiePrefix 字串,default 'SpryMedia_DataTables_' 當開啟狀態儲存特性後,用於指定儲存在cookies中的字串的首碼名字
sDom default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 這是用於定義DataTable布局的一個強大的屬性,另開專門文檔來補充說明吧
sPaginationType 'full_numbers' or 'two_button', default 'two_button' 用於指定分頁器風格
sScrollXInner string default 'disabled' 又是水平滾動相關的,沒搞懂啥意思



對於伺服器來說,可以通過請求參數來獲得當前的操作資訊。[也就是說以下這個列表中的屬性值都是可以在伺服器端的方法中擷取到。]這些在下面的例子中aodata中都可以擷取得到


類型 名稱 說明
int iDisplayStart 顯示的起始索引
int iDisplayLength 顯示的行數
int iColumns 顯示的列數
string sSearch 全域搜尋欄位
boolean bEscapeRegex 全域搜尋是否正則
boolean bSortable_(int) 表示一列是否在用戶端被標誌位可排序
boolean bSearchable_(int) 表示一列是否在用戶端被標誌位可搜尋
string sSearch_(int) 個別列的搜尋
boolean bEscapeRegex_(int) 個別列是否使用正則搜尋
int iSortingCols 排序的列數
int iSortCol_(int) 被排序的列
string sSortDir_(int) 排序的方向 "desc" 或者 "asc".
string sEcho DataTables 用來產生的資訊


 
伺服器返回的資料格式如下所示
類型 名稱 說明
int iTotalRecords 實際的行數
int iTotalDisplayRecords 過濾之後,實際的行數。
string sEcho 來自用戶端 sEcho 的沒有變化的複製品,
string sColumns 可選,以逗號分隔的列名,
array array mixed aaData 數組的數組,表格中的實際資料。
 
回呼函數名稱 參數 傳回值 預設 功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set string: cookie formatted string (which should be encoded by using encodeURIComponent()) null 當每次cookies改變時,會觸發這個函數調用
fnDrawCallback 在每次table被draw完後調用,至於做什麼就看著辦吧
fnFooterCallback 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用於在每次重畫的時候修改表格的腳部
fnFormatNumber 1.int : number to be formatted String : formatted string for DataTables to show the number 有預設的 用於在大數字上,自動加入一些逗號,分隔開
fnHeaderCallback 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用於在每次draw發生時,修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules string: The string to be displayed in the information element. 用於傳達table資訊
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成後調用
fnPreDrawCallback 1.object:oSettings - DataTables settings object Boolean 用於在開始繪製之前調用,返回false的話,會阻止draw事件發生;返回其它值,draw可以順利執行
fnRowCallback 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : "TR" element for the current row 當建立了行,但還未繪製到螢幕上的時候調用,通常用於改變行的class風格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用於替換預設發到服務端的請求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded, true otherwise 在cookies中的資料被載入前執行,可以方便地修改這些資料
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.