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(数组使用)

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

看如下结构的数据:

"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 将会被使用。

看下面的数据例子:

"data": "phone",
"render": {
    "_": "plain",
    "filter": "filter",
    "display": "display"
}

function render( data, type, row, meta )

描述:

如果做为一个function,那么每当Datatables从columns中的cell获取数据时,都需要执行该方法。 注意,该方法会被多次调用,根据不同的数据类型,比如sorting(排序)、filtering(过滤)和display(显示)

参数:
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"
        }
    ]
});

相关

下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。

http://datatables.net/reference/option/columns.render

Translation from DataTables.net, with permission