渲染器

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

将原始数据转换为将在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'
}

字符串

内置助手

jQuery Datetable 渲染的更多相关文章

  1. jquery重新渲染的问题

    今天动态加载了一个a标记,使他被渲染为linkbutton 在拼该a标记串时,将class属性设置为:class='easyui-linkbutton' ,然而却没有看到linkbutton的效果,原 ...

  2. jQuery Datetable

    先来个官网可以直接看官网  https://www.datatables.net/manual/data/ 安装 DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互 ...

  3. Swiper的jquery动态渲染不能滑动

    <!-- 下面俩行代码就是解决异步加载数据导致swiper不轮播的关键 --> observer: true,//修改swiper自己或子元素时,自动初始化swiper observePa ...

  4. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  5. jquery mobile 教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  6. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  7. jQuery Mobile入门教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  8. jquery mobile 入门

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  9. jQuery Mobile 所有data-*选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

随机推荐

  1. SUN平台服务器光纤共享存储互斥失败如何恢复数据?

    服务器数据恢复故障描述: 服务器最初的设计思路为将两台SPARC SOLARIS系统通过光纤交换机共享同一存储作为CLUSTER使用,正常情况下A服务器工作,当A服务器发生故障宕机后即可将其关机然后开 ...

  2. ThreadLocal源码分析:(一)set(T value)方法

    在ThreadLocal的get(),set()的时候都会清除线程ThreadLocalMap里所有key为null的value. 而ThreadLocal的remove()方法会先将Entry中对k ...

  3. PHP环境手动搭建wamp-----Apache+MySQL+PHP

    首先下载分别下载Apache+MySQL+PHP. 然后分别解压到文件夹中. 1.安装Apache 1)检查80端口是否占用 说明:apache软件占用80软件,在计算机中一个端口只能被一个软件占用 ...

  4. JAVA_SE基础——57.有了包之后类与类之间的访问使用import语句

    代码1访问代码2 代码1: class Demo3 { public static void main(String[] args) { Demo4 a = new Demo4(); a.print( ...

  5. 看到一个对CAP简单的解释

    一个分布式系统里面,节点组成的网络本来应该是连通的.然而可能因为一些故障,使得有些节点之间不连通了,整个网络就分成了几块区域.数据就散布在了这些不连通的区域中.这就叫分区.当你一个数据项只在一个节点中 ...

  6. windows安装tensorflow简单直接的方法(win10+pycharm+tensorflow-gpu1.7+cuda9.1+cudnn7.1)

    安装tensorflow-gpu环境需要:python环境,tensorflow-gpu包,cuda,cudnn 一,安装python,pip3直接到官网下载就好了,下载并安装你喜欢的版本 https ...

  7. leetcode算法: Find Bottom Left Tree Value

    leetcode算法: Find Bottom Left Tree ValueGiven a binary tree, find the leftmost value in the last row ...

  8. Django中ORM介绍和字段及其参数

    ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述 ...

  9. Tomcat NIO

    说起Tomcat的NIO,不得不提的就是Connector这个Tomcat组件.Connector是Tomcat的连接器,其主要任务是负责处理收到的请求,并创建一个Request和Response的对 ...

  10. Scale

    Scale刻度组件. 当你希望用户输入某个范围内的一个数值,使用scale组件可以很好的代替Entry组件. 用法: 创建一个指定范围的Scale组件其实非常容易,你只需要指定from和to两个选项即 ...