Datatables 1.10.x在命名上與1.9.x的有區別,新版的使用的是駝峰的命名規則,而之前的是採用匈牙利命名規則
當然,這些變化都是向下相容的,你可以繼續使用舊版本的api方法的引數和名稱。 如果你要是用新版本的api方法,請參考下面表格的對照表,大多數的都是直接從匈牙利命名到駝峰命名,極個別重新命名,還添加了新的屬性名稱。
初始化
現在可以這樣建立一個Datatables:
$(...).dataTable()
建立一個Datatables並返回一個jquery物件(1.9-)
$(...).DataTable()
建立一個Datatables並返回一個新的Datatables API例項
兩種方法都可以在1.10+版本中使用
選項(Options)
匈牙利式 | 駝峰式 | 含義 |
---|---|---|
aaData |
dataDT |
給表格顯示資料 |
aaSorting |
orderDT |
表格初始化排序 |
aaSortingFixed |
orderFixedDT |
Ordering to always be applied to the table |
aDataSort |
columns.orderDataDT |
定義多個列作為列的預設順序 |
aLengthMenu |
lengthMenuDT |
改變每頁顯示條數列表的選項 |
aTargets |
columnDefs.targetsDT |
適用於指定一個特定的列 |
aoColumns |
columnsDT |
列配置陣列 |
aoColumnDefs |
columnDefsDT |
列定義配置陣列 |
aoSearchCols |
searchColsDT |
給個別列定義搜尋選項 |
asSorting |
columns.orderSequenceDT |
指定排序 |
asStripeClasses |
stripeClassesDT |
在表中設定斑馬條紋類的行 |
bAutoWidth |
autoWidthDT |
讓Datatables自動計算寬度 |
bDeferRender |
deferRenderDT |
延遲渲染可以提高Datatables的載入速度 |
bDestroy |
destroyDT |
允許重新例項化Datatables |
bFilter |
searchingDT |
開啟搜尋功能 |
bInfo |
infoDT |
開啟Datatables資訊顯示 |
bJQueryUI |
jQueryUIDT |
使用jqueryui樣式(需要引入jqueryui的css) |
bLengthChange |
lengthChangeDT |
允許改變每頁顯示的資料條數 |
bPaginate |
pagingDT |
允許表格分頁 |
bProcessing |
processingDT |
顯示載入資訊 |
bRetrieve |
retrieveDT |
檢索一個已存在的Datatables例項 |
bScrollAutoCss |
廢棄 | |
bScrollCollapse |
scrollCollapseDT |
開啟滾動條 |
bScrollInfinite |
廢棄 | |
bSearchable |
columns.searchableDT |
定義列是否允許搜尋 |
bServerSide |
serverSideDT |
開啟伺服器模式 |
bSort |
orderingDT |
是否啟用Datatables排序 |
bSortable |
columns.orderableDT |
開啟或關閉某列的排序 |
bSortCellsTop |
orderCellsTopDT |
Control which cell the order event handler will be applied to in a column |
bSortClasses |
orderClassesDT |
排序列高亮顯示 |
bStateSave |
stateSaveDT |
允許瀏覽器快取Datatables,以便下次恢復之前的狀態 |
bUseRendered |
廢棄 | Use columns.renderDT |
bVisible |
columns.visibleDT |
列是否顯示 |
fnCookieCallback |
廢棄 | |
fnCreatedCell |
columns.createdCellDT |
單元格被建立回撥函式,允許dom操作 |
fnCreatedRow |
createdRowDT |
tr被建立回撥函式 |
fnDrawCallback |
drawCallbackDT |
表格重繪的時候回撥函式 |
fnFooterCallback |
footerCallbackDT |
foot顯示回撥函式 |
fnFormatNumber |
formatNumberDT |
數字格式化回撥函式 |
fnHeaderCallback |
headerCallbackDT |
thead顯示回撥函式 |
fnInfoCallback |
infoCallbackDT |
表格主要資訊顯示回撥函式 |
fnInitComplete |
initCompleteDT |
表格載入完成回撥函式 |
fnPreDrawCallback |
preDrawCallbackDT |
預繪製回撥函式 |
fnRender |
廢棄 | Use columns.renderDT |
fnRowCallback |
rowCallbackDT |
行重繪回撥 |
fnServerData |
ajaxOption |
從 Ajax 源載入資料的表的內容,ajax 作為function用法 |
fnServerParams |
ajax.dataOption |
傳送給伺服器的引數 |
fnStateLoad |
stateLoadCallbackDT |
定義在何處以及如何應載入已儲存的狀態的回撥 |
fnStateLoaded |
stateLoadedDT |
狀態被讀取回調 |
fnStateLoadParams |
stateLoadParamsDT |
載入狀態,資料操作回撥 |
fnStateSave |
stateSaveCallbackDT |
定義如何存和在哪裡儲表狀態回撥 |
fnStateSaveParams |
stateSaveParamsDT |
狀態儲存,資料操作回撥 |
iCookieDuration |
stateDurationDT |
狀態儲存的有效期 |
iDataSort |
columns.orderDataDT |
定義多個列作為列的預設順序 |
iDeferLoading |
deferLoadingDT |
延遲載入伺服器端資料直到第二次重繪 |
iDisplayLength |
pageLengthDT |
更改初始頁面長度 (每頁的行數) |
iDisplayStart |
displayStartDT |
初始分頁起始點 |
iScrollLoadGap |
廢棄 | |
iTabIndex |
tabIndexDT |
選項卡索引控制元件的鍵盤導航 |
mData |
columns.dataDT |
從行資料物件/陣列設定列的資料來源 |
mRender |
columns.renderDT |
Render (process) the data for use in the table |
oLanguage .oAria.sSortAscending |
language.aria.sortAscendingDT |
用於WAI-ARIA(無障礙網頁應用)屬性 |
oLanguage .oAria.sSortDescending |
language.aria.sortDescendingDT |
用於WAI-ARIA(無障礙網頁應用)屬性 |
oLanguage .oPaginate.sFirst |
language.paginate.firstDT |
翻頁中“首頁”字串 |
oLanguage .oPaginate.sLast |
language.paginate.lastDT |
翻頁中“尾頁”字串 |
oLanguage .oPaginate.sNext |
language.paginate.nextDT |
翻頁中“下一頁”字串 |
oLanguage .oPaginate.sPrevious |
language.paginate.previousDT |
翻頁中“上一頁”字串 |
oLanguage .sEmptyTable |
language.emptyTableDT |
表格中沒有資料時顯示的字串 |
oLanguage .sInfo |
language.infoDT |
表格主要資訊顯示字串 |
oLanguage .sInfoEmpty |
language.infoEmptyDT |
當表格沒有資料和搜尋記錄時,表格主要資訊顯示字串 |
oLanguage .sInfoFiltered |
language.infoFilteredDT |
當使用搜索功能後,表格主要資訊出追加的字元 |
oLanguage .sInfoPostFix |
language.infoPostFixDT |
追加到所有其他主要資訊字串之後 |
oLanguage .sInfoThousands |
language.thousandsDT |
千分位分隔符 |
oLanguage .sLengthMenu |
language.lengthMenuDT |
頁面顯示資料條數選項 |
oLanguage .sLoadingRecords |
language.loadingRecordsDT |
當ajax載入資料時-載入資訊顯示字串 |
oLanguage .sProcessing |
language.processingDT |
顯示正在處理字串 |
oLanguage .sSearch |
language.searchDT |
搜尋框顯示字串 |
oLanguage .sUrl |
language.urlDT |
從遠端載入語言資訊檔案url |
oLanguage .sZeroRecords |
language.zeroRecordsDT |
過濾後空的結果字串 |
oSearch |
searchDT |
設定一個在Datatables初始化時的搜尋選項 |
sAjaxDataProp |
ajax.dataSrcDT |
表資料的資料屬性或操作方法 |
sAjaxSource |
ajax.urlOption |
從 Ajax 源載入資料的表的內容 |
sCellType |
columns.cellTypeDT |
要為列建立的單元格型別 |
sClass |
columns.classNameDT |
指定單元格樣式 |
sContentPadding |
contentPaddingDT |
給文字內容新增填充被用來計算最合適的表格 |
sCookiePrefix |
廢棄 | |
sDefaultContent |
columns.defaultContentDT |
給列設定預設的,靜態的內容 |
sDom |
domDT |
按什麼順序定義表的控制元素在頁面上出現 |
sName |
columns.nameDT |
設定列的描述性名稱 |
sPaginationType |
pagingTypeDT |
分頁按鈕種類顯示選項 |
sScrollX |
scrollXDT |
水平滾動條 |
sScrollXInner |
scrollXInner |
沒有文件在1.10中 |
sScrollY |
scrollYDT |
垂直滾動條 |
sServerMethod |
ajax.typeOption |
從 Ajax 源載入資料的表的內容的方式 |
sSortDataType |
columns.orderDataTypeDT |
Live DOM sorting type assignment |
sTitle |
columns.titleDT |
給列設定名稱 |
sType |
columns.typeDT |
設定用於篩選和排序字串處理的列型別 |
sWidth |
columns.widthDT |
設定列寬 |
API
以下是舊的api轉換新的,新的api有很多,下面沒有全部列出來。關於如何使用它,請參考api完整資訊。
匈牙利式 | 駝峰式 | 含義 |
---|---|---|
$ |
$DT |
Perform a jQuery selection action on the full table. |
_ |
row().data()DT , rows().data()DT , cell().data()DT |
從行、列和單元格中獲取資料 |
fnAddData |
row.add()DT , rows.add()DT |
給表格新增一行或多行 |
fnAdjustColumnSizing |
columns.adjust()DT |
重新計算列的寬度 |
fnClearTable |
clear()DT |
清除表格的所有資料 |
fnClose |
row().child.hide()DT |
隱藏父行的子行 |
fnDeleteRow |
row().remove()DT , rows().remove()DT |
從Datatables刪掉一行或或者更多 |
fnDestroy |
destroy()DT |
從當前上下文銷燬掉Datatables物件 |
fnDraw |
draw()DT |
重繪表格 |
fnFilter |
search()DT , column().search()DT , columns().search()DT |
從表格裡搜尋資料 |
fnGetData |
row().data()DT , rows().data()DT , cell().data()DT |
從列,行,單元格中獲取資料 |
fnGetNodes |
row().node()DT , rows().nodes()DT , cell().node()DT |
從列,行和單元格里獲取節點 |
fnGetPosition |
row().index()DT , cell.index()DT |
獲取有關選定的行、 列或單元格的索引資訊 |
fnIsDataTable |
$.fn.dataTable.isDataTable()DT |
檢查表格的節點是不是Datatable物件 |
fnIsOpen |
row().child.isShown()DT |
檢查子行的父行是否可見 |
fnOpen |
row().child()DT |
使父行的子行可見 |
fnPageChange |
page()DT |
獲取/設定表的當前頁 |
fnSetColumnVis |
column().visible()DT |
獲取/設定單個所選列的可見性 |
fnSettings |
settings()DT |
獲取表的設定物件 |
fnSort |
order()DT , column().order()DT |
選擇指定列排序 |
fnSortListener |
order.listener()DT |
給指定的列新增排序的監聽 |
fnTables |
$.fn.dataTable.tables()DT |
在本頁得到所有的Datatables |
fnUpdate |
row().data()DT , cell().data()DT |
設定行或單元格的資料 |
fnVersionCheck |
$.fn.dataTable.versionCheck()DT |
版本號碼的相容性檢查功能 |
轉載:http://datatables.club/upgrade/1.10-convert.html#