columns.render

起始版本号: 1.10.0

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

说明

这个属性可以操作从数据源读取到的数据。 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起，这个方法返回的数据将会做为这一行的数据源。详细的参考下面给出的示例代码

Array access（数组使用）

当使用如下格式的数据时，该选项可以访问数据中多个和一个元素。你需要理解这两种不同形式之间的区别。

使用这个数组里一个或者多个属性 - 使用 []符号
只获得数组里的一个元素 - 使用点符号 - e.g. .0 访问数组的第一个元素

看如下结构的数据:

"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.dataOption ，前者比后者更容易处理渲染

object

描述:

Datatables要求使用不同数据给不同的数据类型（ filter String display String type String sort String ）。提到属性名称就是对应的属性名，他的值可以被定义为 integer，string或者function，规则就像 columns.renderOption 做的一样

注意， _ String选项可以被定义。当你没有指定数据类型时，这个被当做默认值交给Datatables处理。如果 _ String选项没有被选择数据类型指定到数据列，那么 columns.dataOption 将会被使用。

看下面的数据例子：

"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最终使用的数据

示例

从一个对象数组创建一个逗号分隔的字符串

/*
{
"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"
    }
  ]
} );

作为一个对象,提取不同类型不同的数据

// 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是对象的话：

// 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"
    }
  } ]
} );

根据数据源的数据替换成超链接

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

当字符串太长的时候显示点点

$('#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;
    }
  } ]
} );

使用一个对象实例作为数据源的行

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();
} );

字符如果太长，截取显示

//初始化表格
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实现）

/* 单元格连续纯字母数字强制换行显示 */
.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"
        }
    ]
});

columns.render

说明

Array access（数组使用）

数据类型（Type）

integer

string

object

function render( data, type, row, meta )

示例

相关