jQuery DataTable 插件參數

時間  2019-12-07
標籤 jquery datatable 插件 參數 欄目 JQuery 简体版
原文   原文鏈接


列
儘管datatable能夠得到信息表的直接從DOM,您可能但願給datatable特定指令爲每一個單獨的列。這能夠經過使用要麼aoColumnDefs參數,或aoColumns和對象信息給每一個列。
這個aoColumnDefs參數和aoColumns實現一樣的目標,但不一樣在他們如何工做:
aoColumnDefs: 這個數組容許您針對一個特定列,多個列,或者全部列,使用aTargets屬性的數組中的每一個對象(請注意,介紹了 aoColumnDefs datatable 1.7)。 這提供了很大的靈活性在建立表,由於aoColumnDefs數組能夠是任意長度,目標是你 特別想要的列。aTargets的屬性是一個數組來目標衆多列和每一個元素在它能夠:
一個字符串-類的名稱將會匹配在TH列
0或一個正整數——列索引從左開始算起
一個負整數——從右邊列索引數
字符串「全部」——全部列(即指定一個默認值)
aoColumns:若是指定,那麼這個數組的長度必須等於列的數量在原始的HTML表。使用「null」,您但願僅使用缺省值和自動檢測選項。
兩 aoColumnDefs參數和aoColumns能夠一塊兒使用,儘管aoColumnDefs優先因爲它的靈活性。若是二者都使用,aoColumns 定義將最高優先級。一樣,若是相同的列的目標是在aoColumnDefs屢次,第一個元素的數組將最高優先級,最後一個最低的。
aDataSort
容許一個列的排序採起多個列考慮當作一個排序。例如第一名/姓列意義作一個多列排序的兩列。
Default:默認值:null值的列將自動進行索引
Type:類型: array數組
Code example:代碼示例:
// 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
你能夠控制默認的排序方向,甚至改變行爲的那種處理程序(即只容許升序排序等)使用這個參數。
Default:默認值: [ 'asc', 'desc' ][' asc’,‘desc ']
Type:類型: array數組
Code example:代碼示例:
// 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
啓用或禁用過濾數據在本專欄中。
Default:默認值: true
Type:類型: boolean布爾
Code example:代碼示例:
// 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
啓用或禁用在這列排序。
Default:默認值: true
Type:類型: boolean布爾
Code example:代碼示例:
// 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
當使用fnRender()爲一個列,您可能但願使用原始的數據(在呈現以前)進行排序和過濾(默認是用於呈現的數據,用戶能夠看到)。這多是有用的日期等。
請注意,該選項已被棄用,將被刪除的下一個版本的datatable。請用mRender / mData而不是fnRender。
Default:默認值: true
Type:類型: boolean布爾
Code example:代碼示例:
bVisible
啓用或禁用本專欄的顯示。
Default:默認值: true
Type:類型: boolean布爾
Code example:代碼示例:
// 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
開發人員可定義的函數,就會調用一個 Cell被建立(Ajax源等)或處理輸入(DOM源)。這能夠做爲一種恭維,mRender容許您修改DOM元素(例如添加背景顏色)當元素是可用的。
Default:默認值:
Type:類型: function函數
Code example:代碼示例:
$(document).ready(function() {
$(‘#example’).dataTable({
「aoColumnDefs」: [{
"aTargets": [3],
「fnCreatedCell」: function(nTd, sData, oData, iRow, iCol) {
if (sData == 「1.7″) {
$(nTd).css(‘color’, ‘blue’)
}
}
}]
});
});
fnRender
自定義顯示函數,將要求顯示在本專欄的每個 Cell。
請注意,該選項已被棄用,將被刪除的下一個版本的datatable。請用mRender / mData而不是fnRender。
Default:默認值:
Type:類型: function函數
Code example:代碼示例:
iDataSort
列索引(從0開始!),你想要執行一個在本專欄時被選中進行排序。這能夠用於排序在隱藏列例如。
Default:默認值: -1 使用自動計算列索引
Type:類型: int
Code example:代碼示例:
// 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]
});
});
mData
這個屬性能夠用來讀取JSON數據從任何數據源屬性,包括深層嵌套對象/屬性。能夠給mData在許多不一樣的方面影響其行爲:
integer – treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column). 整數——做爲一個數組索引數據來源。這是默認的,datatable使用(增長爲每一列)。
string – read an object property from the data source.Note that you can use Javascript dotted notation to read deep properties / arrays from the data source. 字 符串——讀一個對象屬性從數據源。注意,您可使用Javascript的點表示法讀深屬性/數組從數據源。
null – the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want – typically an empty string). This can be useful on generated columns such as edit / delete action columns.null ——sDefaultContent選項將被用於cell(空在默認狀況下,因此您將須要指定默認的內容你想要的——一般是一個空字符串)。這能夠用於生 成的列(例如編輯/刪除操做列。
function – the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. 函 數,函數將執行給定datatable時 要設置或獲取數據爲一個單元格的列。 The function takes three parameters:這個函數接受三個參數:
{array|object} The data source for the row{數組|對象}數據源的行
{string} The type call data requested – this will be ‘set’ when setting data or ‘filter’, ‘display’, ‘type’, ‘sort’ or undefined when gathering data. { string } 調用數據請求類型——這將是當設置數據的「set」或「過濾器」、「顯示」、「類型」、「排序」或未定義在收集數據。 Note that when undefined is given for the type DataTables expects to get the raw data for the object back 注意,當未定義了類型datatable指望得到的原始數據對象返回
{*} Data to set when the second parameter is ‘set’.{ * }數據集時,第二個參數是「設置」。
The return value from the function is not required when ‘set’ is the type of call, but otherwise the return is what will be used for the data requested. 從函數返回值不是必需的「set」時是類型的調用,但不然返回就是將用於所請求的數據。
Note that prior to DataTables 1.9.2 mData was called mDataProp. 注 意,以前被稱爲mDataProp mData datatable 1.9.2。 The name change reflects the flexibility of this property and is consistent with the naming of mRender. 這 個名稱的改變反映了該屬性的靈活性和一致的命名mRender。 If ‘mDataProp’ is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required. 若是「mDataProp」是給定的,那麼它仍然會使用datatable,由於它自動地圖舊名稱到新的若是須要。
Default:默認值: null 使用自動計算列索引
Type:類型: string字符串
Code example:代碼示例:
// Read table data from objects
$(document).ready(function() {
var oTable = $(‘#example’).dataTable({
「sAjaxSource」: 「sources/deep.txt」,
「aoColumns」: [{
"mData": "engine"
},
{
"mData": "browser"
},
{
"mData": "platform.inner"
},
{
"mData": "platform.details.0"
},
{
"mData": "platform.details.1"
}]
});
});
// Using mData 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],
「mData」: 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’, ‘type’ and undefined all just use the integer
return source.price;
}
}]
});
});
mRender
這 個屬性是呈現夥伴mData和建議,當你想操縱顯示數據(包括過濾、排序等等),但不改變底層表的數據,使用該屬性。 mData實際上能夠作全部的事 情,這個屬性能夠和更多的,但這個參數很容易使用,由於沒有「設置」選項。像mData是能夠給在許多不一樣的方法來影響它的行爲,經過添加支持數組語法便 於輸出的數組(包括數組對象):
integer – treated as an array index for the data source. 整 數——做爲一個數組索引數據來源。 This is the default that DataTables uses (incrementally increased for each column). 這是默認的,datatable使用(增長爲每一列)。
string – read an object property from the data source. 字 符串——讀一個對象屬性從數據源。 Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader should loop over the data source array. 注 意,您可使用Javascript的點表示法讀深屬性/數組從數據源和數組括號來表示數據的讀者應該循環數據源數組。 When characters are given between the array brackets, these characters are used to join the data source array together. 當 角色會給出括號之間的數組,這些字符被用來鏈接數據源數組在一塊兒。 For example: 「accounts[, ].name」 would result in a comma separated list with the ‘name’ value from the ‘accounts’ array of objects. 例如:「帳戶[,]. name」將致使一個逗號分隔列表的「名字」值從「帳戶」對象數組。
function – the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. 函 數,函數將執行給定datatable時 要設置或獲取數據爲一個單元格的列。 The function takes three parameters:這個函數接受三個參數:
{array|object} The data source for the row (based on mData){數組|對象}數據源的行(基於mData)
{string} The type call data requested – this will be ‘filter’, ‘display’, ‘type’ or ‘sort’. { string }調用數據請求類型——這將是「過濾器」、「顯示」、「類型」或「排序」。
{array|object} The full data source for the row (not based on mData){數組|對象}完整的數據源的行(不是基於mData)
The return value from the function is what will be used for the data requested.從函數返回值是將用於所請求的數據。
Default:默認值: null 使用mData
Type:類型: string字符串
Code example:代碼示例:
// Create a comma separated list from an array of objects
$(document).ready(function() {
var oTable = $(‘#example’).dataTable({
「sAjaxSource」: 「sources/deep.txt」,
「aoColumns」: [{
"mData": "engine"
},
{
"mData": "browser"
},
{
"mData": "platform",
"mRender": "[, ].name」
}]
});
});
// Use as a function to create a link from the data source
$(document).ready(function() {
var oTable = $(‘#example’).dataTable({
「aoColumnDefs」: [{
"aTargets": [0],
「mData」: 「download_link」,
「mRender」: function(data, type, full) {
return ‘<A href=」javascript:changelink(‘http: //www.datatables.net/usage/’+data+」,’EN2ZH_CN’);」 target=_self>Download</A>’;
}]
});
});
sCellType
改變 Cell類型建立的列——要麼TD Cell或TH Cell。這可能會有用,由於TH Cell有語義表中的身體,容許他們做爲一個標題爲一行(您可能但願添加範圍= ‘行」到TH元素)。
Default:默認值: td
Type:類型: string字符串
Code example:代碼示例:
// Make the first column use TH cells
$(document).ready(function() {
var oTable = $(‘#example’).dataTable({
「aoColumnDefs」: [{
"aTargets": [0],
「sCellType」: 「th」
}]
});
});
sClass
類給每一個 Cell在本專欄中。
Default:默認值: Empty string空字符串
Type:類型: string字符串
Code example:代碼示例:
// 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計算列寬來分配給每一個列,它發如今每一列的最長的字符串,而後構造一個臨時表和讀取寬度從那。這裏的問題是,「嗯」是更普遍的那麼 「iiii」,但後者是一個長字符串,所以計算出錯(作它正確,而後把它變成一個DOM對象和測量,是可怕(!)慢)。所以做爲一個「解決」咱們提供該選 項。 它將附加價值的文本是發現是最長的字符串列——即填充。通常來講,你不須要這個,它不是通常DataTables.net文檔記錄
Default:默認值: Empty string空字符串
Type:類型: string字符串
Code example:代碼示例:
// Using aoColumns
$(document).ready(function() {
$(‘#example’).dataTable({
「aoColumns」: [null, null, null, {
"sContentPadding": "mmm"
}]
});
});
sDefaultContent
容許一個默認值是給出一個列的數據,而後使用一個空數據源時遇到(這能夠由於mData設置爲null,或者由於數據源自己是null)。
Default:默認值: null
Type:類型: string字符串
Code example:代碼示例:
// Using aoColumnDefs
$(document).ready(function() {
$(‘#example’).dataTable({
「aoColumnDefs」: [{
"mData": null,
"sDefaultContent": "Edit",
"aTargets": [ - 1]
}]
});
});
// Using aoColumns
$(document).ready(function() {
$(‘#example’).dataTable({
「aoColumns」: [null, null, null, {
"mData": null,
"sDefaultContent": "Edit"
}]
});
});
sName
這 個參數是隻用於datatable的服務器端處理。 它能夠是很是有用的,知道哪些列被顯示在客戶端,並映射這些數據庫字段。當定義,名稱也容許 datatable進行從新排序信息從服務器若是它回來了,一個意想不到的順序(也就是說,若是你把你列在客戶端,您的服務器端代碼不也須要更新)。
Default:默認值: Empty string空字符串
Type:類型: string字符串
Code example:代碼示例:
// 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
定義一個數據源類型的排序,能夠用於讀取實時信息從表(更新內部緩存的版本)排序以前。這容許排序發生在用戶可編輯元素如表單輸入。
Default:默認值: std
Type:類型: string字符串
Code example:代碼示例:
// 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
這篇專欄文章的標題。
Default:默認值:null源自「TH」價值爲本專欄在原始的HTML表。
Type:類型: string字符串
Code example:代碼示例:
// 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
類 型容許您指定的數據如何將該列排序。 Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. 四 種類型(字符串、數字、日期和html(它將帶html標籤分類以前))是目前可用的。 注意,只有日期格式理解Javascript的日期()對象將被 接受爲類型日期。For example: 「Mar 26, 2008 5:03 PM」. 例如:「2008年3月26日,5:03點」。 May take the values: ‘string’, ‘numeric’, ‘date’ or ‘html’ (by default). 可 能須要的值:「字符串「、「數字」、「日期」或「html」(默認狀況下)。進一步的類型能夠經過插件添加。
Default:默認值: null 自動從原始數據獲取
Type:類型: string字符串
Code example:代碼示例:
// 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
定義列的寬度,這個參數能夠採起任何CSS值(3 em,20 px等等)。.DataTables apples ‘smart’ widths to columns ,尚未被給予一個特定的寬度經過這個接口確保表仍然是可讀的。
Default:默認值: null 自動
Type:類型: string字符串
Code example:代碼示例:
// 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]
});
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程