jQuery Datetable 渲染

渲染器

有些情况下，使用表时，表中的行的数据源不包含您希望在表中直接显示的值。您可能希望将其转换为不同的表示形式（时间戳为人类可读的格式），合并数据点（名字和姓氏）或对该值执行一些计算（计算营业额和费用值的余量）。

将原始数据转换为将在DataTable中显示的值的这种转换称为以DataTables的术语进行的渲染，并使用该columns.render选项执行。

 

渲染器的主要优点就是可以在不修改原始数据的情况下修改输出数据。

columns.render 可以以多种不同的方式使用：

• 作为转换数据的一个功能
• 作为从对象中选择数据的字符串

该函数传递三个参数：

1.  指向的数据columns.data。如果columns.data是null,null将是这里的值。

2.  DataTables请求的数据类型 - 这允许函数支持正交数据。（display，sort，filter，type）

3.  行的原始和完整数据对象或数组。

如果数据为以下：

{
    "product": "Toy car",
    "creator": {
        "firstName": "Fiona",
        "lastName": "White"
    },
    "created": "2015-11-01",
    "price": 19.99,
    "cost": 12.53
}

则有以下操作：

{
    data: 'price',
    render: function ( data, type, row ) {
        return '$'+ data;
    }
}

添加格式

{
    data: 'creator',
    render: function ( data, type, row ) {
        return data.firstName +' '+ data.lastName;
    }
}

加入字符串

{
    data: 'created',
    render: function ( data, type, row ) {
        var dateSplit = data.split('-');
        return type === "display" || type === "filter" ?
            dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
            data;
    }
}

转换数据

{
    data: null,
    render: function ( data, type, row ) {
        return Math.round( ( row.price - row.cost ) / row.price * 100 )+'%';
    }
}

计算值

{
    data: 'creator',
    render: 'firstName'
}

字符串

内置助手