jQuery DataTable 插件参数

列

尽管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]

});

});