渲染(处理)数据显示在表格中
这个属性可以操作从数据源读取到的数据。
columns.dataOption
和
columns.renderOption
比较像,可以说前者是只读,后者稍微复杂点可以读可以写。
columns.renderOption
可以看做为把请求过来的数据做进一步的处理,
比较常见的操作有格式化、字符串替换、字符串截取等等其他处理数据的方式。
Datatables把不同数据的不同操作叫做
orthogonal-data
(正交数据),
并允许不同形式的相同数据做不同的操作(例如,日期字段给用户是以'yyyy-MM-dd hh:mi:ss'格式显示和搜索,
但是以long型作为排序)
有三种特殊的值可以通过
columns.renderOption
解决
undefinedType
- 当值未定义时,
columns.defaultContentOption
将会替换作为默认的值去显示.
如果又是undefined又没有定义这个则会得到一个错误
nullType
- 当值为null时,
columns.defaultContentOption
将会替换作为默认值去显示.
如果没有设置默认值则会以一个空的字符串显示 。
nullType
将会被用作其他所有数据类型
functionType
- 方法将执行,返回函数执行后的值。自Datatables 1.10.1起,这个方法返回的数据将会做为这一行的数据源。
详细的参考下面给出的示例代码当使用如下格式的数据时,该选项可以访问数据中多个和一个元素。你需要理解这两种不同形式之间的区别。
[]
符号.0
访问数组的第一个元素看如下结构的数据:
1 2 3 4 5 | "access" : [ { "id" : "1" , "name" : "Printer" }, { "id" : "3" , "name" : "Desktop" }, { "id" : "4" , "name" : "VMs" } ] |
显示 name
属性在单个的 cell
中,使用 access[, ].name
-
将会得到使用 ,
连接的字符串 - e.g.
在这个情况下结果将是 Printer, Desktop, VMsString
显示单个的属性,使用 .{index}
.还是以上面的数据结构,现在要显示数组里的一条数据里的name,
使用 access.0.name
- e.g. 在这个情况下得到的结果是 Printer
从数据源中读取一个对象属性。有是三个特殊的选项可以改变Datatables读取数据源中的对象:
.
- 点,是JavaScript中的符号. 就像你是用 .
来获取JavaScript嵌套对象一样,
所以你也可以在Datatables中的optiondata
同样使用,
比如 browser.version
或者 browser.name
。如果你的对象属性名中包含 .
你可以是用
\\
来避开,比如 first\\.name
[]
- 数组符号. Datatables可以自动在数据源中加入 []
中的字符,比如:
name[, ]
将会把数据用逗号空格来隔开数据。
如果 []
中没有字符,就返回原始的数据。参考上面 Access Array的例子
()
- 函数符号。 添加 ()
到参数的后面,将会执行这个同名函数,
比如: browser()
在数据源中的一个简单的方法,
browser.version()
或者在属性里在嵌套一个方法
browser().version
再或者是从一个方法里返回的对象里获取属性。
注意,函数符号推荐使用
columns.renderOption
而不使用
columns.dataOption
,前者比后者更容易处理渲染
Datatables要求使用不同数据给不同的数据类型(
filter String
display String
type String
sort String
)。提到属性名称就是对应的属性名,他的值可以被定义为 integer,string或者function,规则就像
columns.renderOption
做的一样
注意, _ String
选项可以被定义。当你没有指定数据类型时,这个
被当做默认值交给Datatables处理。
如果 _ String
选项没有被选择数据类型指定到数据列,那么
columns.dataOption
将会被使用。
看下面的数据例子:
1 2 3 4 5 6 | "data" : "phone" , "render" : { "_" : "plain" , "filter" : "filter" , "display" : "display" } |
如果做为一个function,那么每当Datatables从columns中的cell获取数据时,都需要执行该方法。 注意,该方法会被多次调用,根据不同的数据类型,比如sorting(排序)、filtering(过滤)和display(显示)
Name(名称) | Type(类型) | Optional(可选) | |
---|---|---|---|
1 | data |
|
No |
当前cell的值(基于
columns.dataOption
)
|
|||
2 | type |
stringType
|
No |
数据类型 - 有这些值:filter 、display 、type 、sort
|
|||
3 | row |
|
No |
整个row的数据(不基于
columns.dataOption
)
|
|||
4 | meta |
objectType
|
No |
从 1.10.1版开始: 一个对象包含了单元格的附加信息. 对象包含如下属性:
|
方法返回的数据被用作Datatables最终使用的数据
从一个对象数组创建一个逗号分隔的字符串
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* { "browser":"chrome", "engine":"webkiet", "platform": [ { "id": "1", "name": "windows" }, { "id": "3", "name": "linux" }, { "id": "4", "name": "mac" } ] } */ $( '#example' ).dataTable( { "ajaxSource" : "sources/deep.txt" , "columns" : [ { "data" : "engine" }, { "data" : "browser" }, { "data" : "platform" , "render" : "[, ].name" } ] } ); |
作为一个对象,提取不同类型不同的数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // This would be used with a data source such as: // { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... } // Here the `phone` integer is used for sorting and type detection, while `phone_filter` // (which has both forms) is used for filtering for if a user inputs either format, while // the formatted phone number is the one that is shown in the table. $( '#example' ).dataTable( { "columnDefs" : [ { "targets" : 0, "data" : null , // Use the full data source object for the renderer's source "render" : { "_" : "phone" , "filter" : "phone_filter" , "display" : "phone_display" } } ] } ); |
如上, phone
是对象的话:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // This would be used with a data source such as: // "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" } $( '#example' ).dataTable( { "columnDefs" : [ { "targets" : 0, "data" : 'phone' , "render" : { "_" : "plain" , "filter" : "filter" , "display" : "display" } } ] } ); |
根据数据源的数据替换成超链接
1 2 3 4 5 6 7 8 9 | $( '#example' ).dataTable( { "columnDefs" : [ { "targets" : 0, "data" : "download_link" , "render" : function ( data, type, full, meta ) { return '<a href="' +data+ '">Download</a>' ; } } ] } ); |
当字符串太长的时候显示点点
1 2 3 4 5 6 7 8 9 10 11 | $( '#example' ).dataTable( { "columnDefs" : [ { "targets" : 4, "data" : "description" , "render" : function ( data, type, full, meta ) { return type === 'display' && data.length > 40 ? '<span title="' +data+ '">' +data.substr( 0, 38 )+ '...</span>' : data; } } ] } ); |
使用一个对象实例作为数据源的行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | function Person( name, age, position ) { this ._name = name; this ._age = age; this ._position = position; this .name = function () { return this ._name; }; this .age = function () { return this ._age; }; this .position = function () { return this ._position; }; } $(document).ready( function () { var table = $( '#example' ).DataTable({ columns: [ { data: null , render: 'name' }, { data: null , render: 'age' }, { data: null , render: 'position' } ] }); table.row.add( new Person( 'Airi Satou' , 33, 'Accountant' ) ); table.row.add( new Person( 'Angelica Ramos' , 47, 'Chief Executive Officer (CEO)' ) ); table.row.add( new Person( 'Ashton Cox' , 66, 'Junior Technical Author' ) ); table.draw(); } ); |
字符如果太长,截取显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //初始化表格 var oTable = $( "#example" ).DataTable({ ajax: { url: "dataList.action" , data: { args1: "我是固定传参的值,在服务器接收参数[args1]" } }, columns: [{ data: "content" , render: function (data, type, row, meta) { //type 的值 dispaly sort filter //代表,是显示类型的时候判断值的长度是否超过8,如果是则截取 //这里只处理了类型是显示的,过滤和排序返回原始数据 if (type === 'display' ) { if (data.length > 8) { return '<span title="' + data + '">' + data.substr(0, 7) + '...</span>' ; } else { return '<span title="' + data + '>' + data + '</span>' ; } } return data; } }] }); |
字符如果太长,截取显示 (css实现)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* 单元格连续纯字母数字强制换行显示 */ .wordwrap{ word-wrap: break -word; word- break : break -all; overflow: hidden; } /* 超长文字单元格省略号显示 */ .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } //初始化表格 var oTable = $( "#example" ).DataTable({ ajax: { url: "dataList.action" , data: { args1: "我是固定传参的值,在服务器接收参数[args1]" } }, columns: [ { data: "content" , class: "wordwrap ellipsis" } ] }); |
下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。
Translation from DataTables.net, with permission