网络游戏 2017-05-07
参考文档:DataTables reference page
columns 是一个数组,用于指定DataTables包含的列的定义,每项包含的属性包括:
columns.data: 用于指定字段名,可能的值包括:
data属性是一个可以设置和读取的选项。如果你只是需要格式化数据输出,columns.render 选项会更好,因为它是只读的,并且使用起来更加简单。
DataTables 1.10.3 以后,data 选项可以和一个DOM 数据源一起使用,指示DataTables为DOM数据源对象中的每列的数据应该存到哪里。默认情况下,DataTables 将把这些数据存在一个数组里。但是使用这一选项,你可以提供对象属性名来描述使用的对象的结构。
指定数据源中的数组索引。这是DataTables默认使用的值(每列递增)。
读和写的对象时数据源的一个对象属性。有3种特殊的选项值可用来改变DataTables从数据源对象中读取数据的方式:
. – Dotted Javascript notation. 就像你在Javascript中使用 . 读取嵌套对象一样,这也可以在data属性中使用。例如:browser.version 或是 browser.name。如果对象参数名中包含 .,使用\\ 转义,如first\\.name。
[] – Array notation. DataTables 能够自动合并数组数据源的数据,使用提供的字符合并在中括号之间的数据。比如:name[, ] 将生成一个来自原数组的,以逗号分隔的序列。如果中括号之间没有指定字符, 将会返回原始数组的数据。
() – Function notation. 在参数结尾添加() 将会执行给定名称的函数。如:browser() 是在数据源上执行的一个简单函数;browser.version() 是一个嵌套属性上的函数,甚至 browser().version 是从函数返回值中获取一个对象属性。推荐在render 中使用function notation而不是在data中,因为它作为renderer使用起来更简单。
直接使用当前行的原始数据源, 而不是中原始数据源中摘取。这一动作会对其他两个初始化选项有影响:
columns.defaultContent : 当data选项值为null 并且当前列的defaultContent有指定时,当前单元格将使用defaultContent中定义的值。
columns.render: 当data选项值为null 并且render 选项有指定时,当前行的整个数据源将被renderer使用。
对DataTables请求的不同数据类型使用不同的数据(filter, display, type, sort)。 对象的属性名是属性执行的数据类型,并且属性值可以使用integer, string 或是函数来定义,columns.data的规则同样适用。注意 必须指定 _ 选项。这是默认值,如果你没有指定DataTables 请求的数据类型。如:
"data":{ "_": "phone", "filter": "phone_filter", "display": "phone_display" }
当DataTables 需要读取或是这种单元格的值的时候,给定的函数将被执行。
该函数可能会被调用多次,因为DataTables 会为它需要的不同的数据类型调用该函数 – sorting, filtering 和 display.
参数定义:
Name | Type | Optional | Description |
当调用类型是set的时候,函数返回值不是必须的,但是其他情况下返回值被用于请求的数据。
自动使用列的索引值。
// JSON structure for each row in this example: // { // "engine": {value}, // "browser": {value}, // "platform": {value}, // "version": {value}, // "grade": {value} // } $('#example').dataTable( { "ajaxSource": "sources/objects.txt", "columns": [ { "data": "engine" }, { "data": "browser" }, { "data": "platform" }, { "data": "version" }, { "data": "grade" } ] } );
// JSON structure for each row: // { // "engine": {value}, // "browser": {value}, // "platform": { // "inner": {value} // }, // "details": [ // {value}, {value} // ] // } $('#example').dataTable( { "ajaxSource": "sources/deep.txt", "columns": [ { "data": "engine" }, { "data": "browser" }, { "data": "platform.inner" }, { "data": "platform.details.0" }, { "data": "platform.details.1" } ] } );
$(document).ready(function() { $('#example').DataTable({ "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "age" }, { "data": "start_date" }, { "data": "salary" } ] }); } );
$('#example').dataTable( { "columnDefs": [ { "targets": 0, "data": function ( row, type, val, meta ) { if (type === 'set') { row.price = val; // Store the computed display and filter values for efficiency row.price_display = val=="" ? "" : "$"+numberFormat(val); row.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val; return; } else if (type === 'display') { return row.price_display; } else if (type === 'filter') { return row.price_filter; } // 'sort', 'type' and undefined all just use the integer return row.price; } } ] } );
$('#example').dataTable( { "columnDefs": [ { "targets": [ 0 ], "data": null, "defaultContent": "Click to edit" } ] } );
$('#example').dataTable( { "columnDefs": [ { "targets": [ 0 ], "data": "name[, ]" } ] } );
jsbin示例: http://jsbin.com/yeqevu/edit?html,js,output
该文翻译DataTables 官方文档,仅作记录复习只用。