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]
});
});