码上快乐

相关内容   简体   繁体

datatable-----columns.render

本文转载自  查看原文  2017-06-27 09:27  6091 

columns.render

起始版本号: 1.10.0

渲染(处理)数据显示在表格中

说明

这个属性可以操作从数据源读取到的数据。 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不定时一讲 解决

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）

integer

描述:

作为数组索引的数据来源，Datatables默认(每一列递增)

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 将会被使用。

看下面的数据例子：

1
2
3
4
5
6
"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版开始: 一个对象包含了单元格的附加信息. 对象包含如下属性:
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"
         }
     ]
});

相关

下面的选项是直接相关的，也可能是您的应用程序的开发非常有用。

Options

http://datatables.net/reference/option/columns.render


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 columns样式属性使用 fiddler的columns添加HTTPMethod Render和template？ render函数 JQuery Render postgis的geography_columns和geometry_columns有什么区别 Django中render和render_to_response的区别 flutter datatable jQuery datatable DataTable排序
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM