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.defaultContentOptioncolumns.defaultContent不定时一讲将会替换作为默认的值去显示. 如果又是undefined又没有定义这个则会得到一个错误 -
nullType- 当值为null时，columns.defaultContentOptioncolumns.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.renderOptioncolumns.render 1不定时一讲columns.render 2不定时一讲columns.render 3不定时一讲columns.render 4不定时一讲而不使用columns.dataOption，前者比后者更容易处理渲染
-
object
-
描述:
-
Datatables要求使用不同数据给不同的数据类型（
filter Stringdisplay Stringtype Stringsort String）。提到属性名称就是对应的属性名，他的值可以被定义为 integer，string或者function，规则就像columns.renderOptioncolumns.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 dataAnyNo 当前cell的值（基于 columns.dataOption）2 typestringTypeNo 数据类型 - 有这些值： filter、display、type、sort3 rowAnyNo 整个row的数据（不基于 columns.dataOption）4 metaobjectTypeNo 从 1.10.1版开始: 一个对象包含了单元格的附加信息. 对象包含如下属性:
row- 被请求的单元格行的索引.参考row().index()APIcol- 被请求的单元格列的索引.column().index()APIsettings-Datatables.SettingsTypeAPI实例
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"
}
]
});
|
相关
下面的选项是直接相关的，也可能是您的应用程序的开发非常有用。
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
