ajax 参数中render,渲染(处理)数据显示在表格中(columns.render) 选项(option) 参考(reference) Datatables 中文网...

columns.render起始版本号: 1.10.0渲染(处理)数据显示在表格中说明这个属性可以操作从数据源读取到的数据。columns.dataOption和columns.renderOption比较像,可以说前者是只读,后者稍微复杂点可以读可以写。columns.renderOption可以看做为把请求过来的数据做进一步的处理,比较常见的操作有格式化、字符串替换、字符串截取等等其他处理数据...
摘要由CSDN通过智能技术生成

columns.render

起始版本号: 1.10.0

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

说明

这个属性可以操作从数据源读取到的数据。

columns.dataOption

columns.renderOption

比较像,可以说前者是只读,后者稍微复杂点可以读可以写。

columns.renderOption

可以看做为把请求过来的数据做进一步的处理,

比较常见的操作有格式化、字符串替换、字符串截取等等其他处理数据的方式。

Datatables把不同数据的不同操作叫做 orthogonal-data(正交数据),

并允许不同形式的相同数据做不同的操作(例如,日期字段给用户是以'yyyy-MM-dd hh:mi:ss'格式显示和搜索,

但是以long型作为排序)

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同样使用,

比如

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用DataTables表格插件的`columns`选项来配置每一列的显示格式。`columns`选项是一个数组,每个元素表示一列,可以包含多个属性,常用的属性有: - `data`:指定列的数据源字段名。 - `title`:指定列的标题。 - `render`:指定列的渲染函数,用于对数据进行格式化处理。 - `className`:指定列的CSS类名,用于自定义样式。 - `orderable`:指定列是否允许排序。 - `searchable`:指定列是否允许搜索。 - `visible`:指定列是否可见。 - `width`:指定列的宽度。 例如,下面的示例代码定义了一个包含四列的表格,其第一列是`id`字段,第二列是`name`字段,第三列是`age`字段,第四列是`email`字段。其,第四列使用了`render`属性来定义一个渲染函数,将电子邮件地址显示为一个链接: ```javascript $('#example').DataTable( { "columns": [ { "data": "id", "title": "ID", "orderable": true, "searchable": true }, { "data": "name", "title": "Name", "orderable": true, "searchable": true }, { "data": "age", "title": "Age", "orderable": true, "searchable": true }, { "data": "email", "title": "Email", "orderable": false, "searchable": true, "render": function ( data, type, row ) { return '<a href="mailto:' + data + '">' + data + '</a>'; } } ] } ); ``` 在这个示例,除了第四列使用了`render`属性外,其它列都使用了默认的配置,表示允许排序和搜索,使用数据对应的字段名作为列标题。如果需要自定义样式,可以使用`className`属性指定CSS类名,然后在CSS样式文件定义相应的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值