datatable-----columns.render
columns.render
渲染(处理)数据显示在表格中
说明
这个属性可以操作从数据源读取到的数据。 columns.dataOption
和 columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
比较像,可以说前者是只读,后者稍微复杂点可以读可以写。
columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
可以看做为把请求过来的数据做进一步的处理, 比较常见的操作有格式化、字符串替换、字符串截取等等其他处理数据的方式。 Datatables把不同数据的不同操作叫做 orthogonal-data (正交数据), 并允许不同形式的相同数据做不同的操作(例如,日期字段给用户是以'yyyy-MM-dd hh:mi:ss'格式显示和搜索, 但是以long型作为排序)
有三种特殊的值可以通过 columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
解决
-
undefinedType
- 当值未定义时,columns.defaultContentOption
columns.defaultContent不定时一讲
将会替换作为默认的值去显示. 如果又是undefined又没有定义这个则会得到一个错误 -
nullType
- 当值为null时,columns.defaultContentOption
columns.defaultContent不定时一讲
将会替换作为默认值去显示. 如果没有设置默认值则会以一个空的字符串显示 。nullType
将会被用作其他所有数据类型 -
functionType
- 方法将执行,返回函数执行后的值。自Datatables 1.10.1起,这个方法返回的数据将会做为这一行的数据源。 详细的参考下面给出的示例代码
Array access(数组使用)
当使用如下格式的数据时,该选项可以访问数据中多个和一个元素。你需要理解这两种不同形式之间的区别。
- 使用这个数组里一个或者多个属性 - 使用
[]
符号 - 只获得数组里的一个元素 - 使用点符号 - e.g.
.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
数据类型(Type)
string
- 描述:
-
从数据源中读取一个对象属性。有是三个特殊的选项可以改变Datatables读取数据源中的对象:
-
.
- 点,是JavaScript中的符号. 就像你是用.
来获取JavaScript嵌套对象一样, 所以你也可以在Datatables中的optiondata
同样使用, 比如browser.version
或者browser.name
。如果你的对象属性名中包含.
你可以是用\\
来避开,比如first\\.name
-
[]
- 数组符号. Datatables可以自动在数据源中加入[]
中的字符,比如:name[, ]
将会把数据用逗号空格来隔开数据。 如果[]
中没有字符,就返回原始的数据。参考上面 Access Array的例子 -
()
- 函数符号。 添加()
到参数的后面,将会执行这个同名函数, 比如:browser()
在数据源中的一个简单的方法,browser.version()
或者在属性里在嵌套一个方法browser().version
再或者是从一个方法里返回的对象里获取属性。 注意,函数符号推荐使用columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
而不使用columns.dataOption
,前者比后者更容易处理渲染
-
object
- 描述:
-
Datatables要求使用不同数据给不同的数据类型(
filter String
display String
type String
sort String
)。提到属性名称就是对应的属性名,他的值可以被定义为 integer,string或者function,规则就像columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
做的一样注意,
_ String
选项可以被定义。当你没有指定数据类型时,这个 被当做默认值交给Datatables处理。 如果_ String
选项没有被选择数据类型指定到数据列,那么columns.dataOption
将会被使用。看下面的数据例子:
123456"data"
:
"phone"
,
"render"
: {
"_"
:
"plain"
,
"filter"
:
"filter"
,
"display"
:
"display"
}
function render( data, type, row, meta )
- 描述:
-
如果做为一个function,那么每当Datatables从columns中的cell获取数据时,都需要执行该方法。 注意,该方法会被多次调用,根据不同的数据类型,比如sorting(排序)、filtering(过滤)和display(显示)
- 参数:
-
Name(名称) Type(类型) Optional(可选) 1 data
Any
No 当前cell的值(基于 columns.dataOption
)2 type
stringType
No 数据类型 - 有这些值: filter
、display
、type
、sort
3 row
Any
No 整个row的数据(不基于 columns.dataOption
)4 meta
objectType
No 从 1.10.1版开始: 一个对象包含了单元格的附加信息. 对象包含如下属性:
row
- 被请求的单元格行的索引.参考row().index()API
col
- 被请求的单元格列的索引.column().index()API
settings
-Datatables.SettingsType
API实例
- Returns(返回):
-
方法返回的数据被用作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" } ] }); |
相关
下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。