DataTables的columns.render属性

DataTables的一系列文章我在学习中遇到的问题及解决方法的总结，也包含对官方文档的翻译，希望能分享给大家，共同进步

columns.render属性是在DataTables初始化表中需要设置的非常重要的部分

例如初始化一个简单的表格

const stock_history_table = $('#stock_sort_table').DataTable({
            //这样配置后，即可用DT的API来访问表格数据
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": '<?php echo base_url(""); ?>' + '/' + stockID + '/' + startDate + '/' + endDate ,
                "type": "GET",
                // "async":true,
                "dataSrc": function(result){
            
                    //给行绑定选中事件
                    $('#stock_sort_table tbody').on( 'click', 'tr', function () {
                        if ($(this).hasClass('selected')) {
                            $(this).removeClass('selected');
                        }
                        else {
                            stock_history_table.$('tr.selected').removeClass('selected');
                            $(this).addClass('selected');
                        }
                    } );

                    return result
                }
            },
            columns: [
                {data: "date"},   // 第一列
                {data: "stock_id"},  // 第二列
                {data: "stock_name"},
                {
                    data: "digest",    // 第四列
                    render:function(data,type,row,meta){   // 通过render属性返回不同的样式
                        if (data === "证券买入") {
                            return "<p style='color:red'>" + data + "</p>"
                        } else {
                            return "<p style='color:blue'>" + data + "</p>"
                        }
                    }
                }
            ]
        });

通过ajax获取到的数据如果需要进一步的处理并且对应到相应的列上，就需要对columns属性进行设置。

columns属性中的每一项对应了从左到右的每一列，在上面初始化的表中，第一列就是日期，第二列就是股票名称，以此类推，第三列是股票名称，前三列因为直接将数据展示出来就可以，因此只设置了data属性，data属性值是ajax取回来的数据里面对应的数据（如果需要对取回来的数据进行处理，可以在“ajax”属性中的“dataSrc”属性对应的函数进行处理），上表中通过ajax取回的json数据应该如下所示：

[{
"date": "2019-08-12 10:42:04",
"stock_id": "000063",
"stock_name": "中兴通讯",
"digest": "证券买入",
}]

第四列展示的是证券操作，是买入或者卖出等，我们希望如果是买入显示为红色，如果是卖出显示为蓝色，这种显示上的变化通过数据处理是很麻烦的，因此我们通过columns中的render属性对应的函数进行处理，实现功能。（这样也可以对相同的数据进行不同的展示）

以下是官网对于columns.render属性的介绍，我进行了翻译和简化

1. columns.render可以对三种特殊值进行处理

值	处理方法
undefined	会使用columns.defaultContent的值，如果没有指定默认的内容，那么会报错
null	会使用columns.defaultContent的值，如果没有指定默认的内容，会将单元格显示为空
function	将执行该函数并使用返回的值。从DataTables 1.10.1开始，函数将在与行数据对象相同的范围内执行。这样做的结果是可以使用对象实例作为行的数据源。

2. render属性值的类型为函数时的具体使用方法

render（data，type，row，meta） 各参数的意义如下：

	名称	类型	可选	备注
1	data	Any	no	就是此单元格的值（columns.data）
2	type	string	no	对这个单元格的值的类型进行过滤
3	row	Any	no	此单元格所在行的整行数据
4	meta	object	no	用来存储额外信息（包括row，col，settings），row是本单元格的所在行的index（可以通过row().index()拿到），col是本单元格所在列的index（可以通过column().index()拿到），settings可以用来获取这个表的API实例

注：以上四个参数在官网中写的是不可选，但是我在实际使用中发现是可选的，如果有知道为什么的朋友可以在评论区讨论

3. 开发实例

• 返回的是从数组对象中获取的以逗号分隔的列表（返回一个字符串）

$('#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, row, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

• 显示长字符串的省略号

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 4,
    "data": "description",
    "render": function ( data, type, row, 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();
} );

更详细的信息可以查阅官网对columns.render的介绍