datatable-----columns.render

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

posted @ 2017-06-27 09:27  i火舞  阅读(7497)  评论(0)    收藏  举报