JQuery Datatables 数据操作

DataTables有4种内置数据操作,每一个都可能使用正交(独立)数据源。这四种操作如下,重点看前三个。

display(string)//用于显示的数据
sort(string)//用于排序的数据
filter(string)//用于过滤的数据
type(string)//类型检测数据

 比如有如下类型的数据源:

{"name":       "Tiger Nixon","position":   "System Architect","start_date": {"display": "Mon 25th Apr 11","timestamp": "1303682400","filter":"2020-10-09"},"office":     "Edinburgh"
}
columns:[{data: 'start_date',render: {_: 'display',//‘_’等同于'display'sort: 'timestamp',filter:'filter'}}...//其他列配置
]

 Datatables可以加载嵌套的数据源

{"name": "Tiger Nixon","hr": {"position": "System Architect","salary": "$320,800","start_date": "2011/04/25"},"contact": {"office": "Edinburgh","extn": "5421"}
}

针对上述代码,可以初始化如下代码: 

$('#myTable').DataTable( {ajax: ...,columns: [{ data: 'name' },{ data: 'hr.position' },{ data: 'hr.salary' },{ data: 'hr.state_date' },{ data: 'contact.office' },{ data: 'contact.extn' }]
} );

 可以使用render方法进行数据操作

columns:[{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 )+'%';}}
]

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548375.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

apache 添加下载文件头

AddType application/octet-stream .rar #windowsAddType application/octet-stream .apk #androidAddType application/octet-stream .ipa #苹果

JQuery Datatables单元格内显示数据太长,截取部分显示功能

//初始化表格 var oTable $("#example").DataTable({ajax: {url: "dataList.action",data: {args1: "我是固定传参的值,在服务器接收参数[args1]"}},columns: [{data: "content",render: function(data, type, row, meta)…

JQuery Datatables辅助函数

数字辅助函数。number辅助函数提供了轻松格式化数字的功能。处理数字时,您可能经常希望添加格式,前缀和后缀字符(比如货币标示符),使用千位分隔符并制定数字的精度。使用number辅助函数可以做到这些。 数字辅助函数包含…

多表替代密码

多表替代密码转载于:https://www.cnblogs.com/LoveFishC/archive/2012/08/03/3846672.html

SqlServer用SQL语句将查出的数据直接插入到另一个张的表中

示例代码: INSERT INTO dbo.Barcode( BarNo ,FiscalYear ,FiscalMonth ,BarType ,ItemId ,ItemName ,WhId ,WhName ,CurrentWhId ,CurrentWhName ,ItemQty ,LotNo ,StUserId ,StUserName ,StDatetime ,RKVou ,CKVou ,DeprecatedUserId ,DeprecatedUserName ,Depre…

Oracle-物化视图

Oracle-物化视图 介绍:oracle物化视图是包括一个查询结果的数据库对象,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表。物化视图存储基于远程表的数据,也可以称为快照。对于复制,物化视图允许你在本地…

windows7 删除hiberfil.sys文件的方法

在cmd模式下输入命令“powercfg -h off”—回车 如果想还原,同样运行那条命令,把off改成on.就行了 此设置将彻底禁用休眠。转载于:https://blog.51cto.com/hujizhou/954329

JS判断一个数字是否为小数

<script type"text/javascript">var x 4.23323;//测试的数字var y String(x).indexOf(".") 1;//获取小数点的位置var count String(x).length - y;//获取小数点后的个数if(y > 0) {alert("这个数字是小数&#xff0c;有" count &…

使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength 属性设置的值。

一、报错截图如下所示&#xff1a; 二、报错代码&#xff1a; List<BarcodeEntity> Lists _IBarcode.GetBarcodeByWhAndType(WhId,BarcodeType); return Json(Lists,JsonRequestBehavior.AllowGet); 三、修正代码&#xff1a; List<BarcodeEntity> Lists _IBa…

Software

Bioimage related : 1. Cellprofiler: http://www.cellprofiler.org/index.shtml MATLAB 2012: http://matlab.tuc.gr/R2012b/转载于:https://www.cnblogs.com/stoneresearch/archive/2012/08/06/4336578.html

Jquery 获取select选中的value、text

<select id"select"><option value"123">456</option> </select> var a $(#select).val(); // 结果为 123var b $(#select option:selected).val(); // 结果为 123var d $(#select option:selected).attr(value); //…

DevExpress之TreeList节点绑定图片

最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片&#xff1b;查阅相关资料实现方法如下&#xff1a;1.首先打开VS2010新建一个WINFROM应用程序&#xff1b; 2.在WINFROM应用程序中增加DX中的TreeList控件&#xff1b;如下图&#xff1a; 3.在窗…

ASP.NET MVC从数据库读取、存入图片

一、DEMO效果 先选择图片&#xff0c;点击上传后&#xff0c;即可在照片预览中看到照片。如果需要更改&#xff0c;重新上传就可覆盖原图片。 二、代码 页面端&#xff0c;这里有个细节&#xff1a;再次上传后&#xff0c;如果<img>的URL不变&#xff0c;浏览器会从缓存中…

.net密码找回

using System;using System.Collections.Generic;using System.Text;using System.Net.Mail;using System.IO; /// <summary> /// sendEmail 的摘要说明 /// </summary> public static class sendEmail { static sendEmail() { // // TODO…

C#使用模板文件批量导出word文档

需求背景 因为疫情爆发&#xff0c;进入一级响应状态&#xff0c;公安部门进行了严格出入境管理&#xff0c;需要对每个出入境的人进行状态跟踪。 疫情专班会将出入境的每个人员汇总在一张Excel表中&#xff0c;如下图所示&#xff1a; 每一行对应一个人员信息&#xff0c;一个…

WP7 开发(九) WP7控件开发(六)-DeepZoom技术

2011年11月14日 -DeepZoom&#xff1a;源于遥感影像的金字塔显示方式&#xff0c;提供了与高分辨率图像进行交互的能力&#xff0c;可以快速缩放图像而不影响应用的性能&#xff0c;加载或平移图像时可以光滑过度 -应用&#xff1a;高分辨率、极大图像的浏览&#xff0c;3D合成…

以太网单播、组播、广播

单播&#xff1a;单播MAC地址是从源到目的的唯一地址。 广播&#xff1a;就是一个主机向所有主机发送一个数据包。 组播&#xff1a;就是把数据发送给一组主机或者发送给感兴趣的主机。&#xff08;组播的MAC地址是以&#xff1a;01-00-5E开头的&#xff0c;组播的IP地址224.0.…

[Android疑难杂症]Gallery默认和横竖屏切换选中状态问题(2.3、2.3系统存在)

前言Gallery的Item使用的是一个ImageViewTextView&#xff0c;并且为其设置了selector&#xff0c;当使用setSelection设置时、横竖屏切换时Item的状态不会改变&#xff0c;这个目前在2.2、2.3系统中存在&#xff0c;高版本如4.0是不存在的。声明欢迎转载&#xff0c;但请保留文…

原子操作的实现原理(锁和循环CAS)

1 引言 原子&#xff08;atom&#xff09;本意是“不能被进一步分割的最小粒子”&#xff0c;而原子操作&#xff08;atomic operation&#xff09;意为”不可被中断的一个或一系列操作” 。在多处理器上实现原子操作就变得有点复杂。本文让我们一起来聊一聊在Inter处理器和…