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屬性對應的函數進行處理臼寄，實現(xiàn)功能霸奕。（這樣也可以對相同的數據進行不同的展示）

以下是官網對于columns.render屬性的介紹，我進行了翻譯和簡化

1. columns.render可以對三種特殊值進行處理

2. render屬性值的類型為函數時的具體使用方法

render（data，type拭宁，row洛退，meta） 各參數的意義如下：

注：以上四個參數在官網中寫的是不可選媒区，但是我在實際使用中發(fā)現(xiàn)是可選的，如果有知道為什么的朋友可以在評論區(qū)討論

3. 開發(fā)實例

• 返回的是從數組對象中獲取的以逗號分隔的列表（返回一個字符串）

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

• 用作從數據源創(chuàng)建鏈接的函數

$('#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的介紹