JQuery Datatables Columns API 参数详细说明
---恢复内容开始---
Data Tables: http://datatables.NET/
Version: 1.10.0
Columns说明
虽然我们可以通过DOM直接获取DataTables元素的信息,但是DataTables提供了更方便的方法,可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。
- DataTables提供了两个参数来定义列属性:columns 和 columnDefs (源代码里:aoColumns 和 aoColumnDefs)
- 为了用户定义的参数更易于理解,DataTables提供的用户参数名和源代码的参数名是不一样的,不过这两个参数名,不管使用哪个,最终效果是一样的。(*以下参数说明都是用户使用参数名)
columns 和 columnDefs的区别:
- 相同点:达到相同的效果
- 不同点:作用不一样,使用不一样(需要一个目标属性在每个定义的对象(columnDefs.targetsDT))
- columns:设置特定列的初始化属性,可以定义数组设置多列,数组长度必须等于表格的数量,只想使用默认值可以设为“NULL”,数组每个元素只能设置单列的属性。
- columnDefs:与columns非常相似,该数组可以针对特定的列,多列或者所有列定义。数组可以任意长度。通过targets参数设置一个列或者多列,该属性定义可以如下:
- 0或正整数 - 从左边的列索引计数
- 负整数 - 列索引从右边计数
- 一个字符串 - 类名称将被匹配上的TH为列
- 字符串“_all” - 所有的列(即指定一个默认值)
- 两个参数可以同时使用,但是columns定义的优先级最高。
- 当columnDefs里对同一列有多个定义时,最开始的定义优先级最高。
example:
- $('#example').dataTable(
- {
- data: [
- {
- "name": "Tiger Nixon1",
- "position": "System Architect1",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1201",
- "start_date": "2011/04/25",
- "office": "Edinburgh1",
- "extn": "54211"
- },
- {
- "name": "Tiger Nixon2",
- "position": "System Architect2",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1202",
- "start_date": "2011/04/25",
- "office": "Edinburgh2",
- "extn": "54212"
- },
- {
- "name": "Tiger Nixon3",
- "position": "System Architect3",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1203",
- "start_date": "2011/04/25",
- "office": "Edinburgh3",
- "extn": "54213"
- }
- ],
- columnDefs: [
- {
- "targets": 0,
- "searchable": false
- },
- {
- "targets": [1,2,3],
- "orderData": [ 2, 3, 4 ],
- "searchable": false
- },
- {
- "targets": [-3,-4],
- "orderable": false,
- "searchable": false
- }
- ],
- columns: [
- { "name": "name",
- "cellType": "th",
- "orderDataType": "dom-text",
- "orderSequence": [ "desc","asc", "asc" ],
- "className": "my_class",
- "contentPadding": "mmm",
- "createdCell": function (td, cellData, rowData, row, col) {
- if ( row < 1 ) {
- $(td).css('color', 'red');
- }
- },
- "data": "name",
- "searchable": true,
- "title": "My Name"
- },
- {
- "data": "position",
- "render": function ( data, type, full, meta ) {
- return '<a href="'+data+'">' + data + '</a>';
- }
- },
- {
- "data": 'phone',
- "render": {
- "_": "plain",
- "filter": "filter",
- "display": "display"
- }
- },
- { "data": "office" },
- { "data": "start_date", "type": "date" },
- { "data": "extn", "visible": false},
- { "data": "salary", "width": "20px" },
- {
- "data": null,
- "orderable": false,
- "defaultContent": "<button>Edit</button>"
- }
- ]
- }
- );
用户参数名 | 源码参数名 | 英文解释 | 中文解释 |
cellType |
sCellType |
Cell type to be created for a column | 设置列标签的类型(ex:th,td) |
className |
sClass |
Class to assign to each cell in the column | 设置列的class属性值 |
contentPadding |
sContentPadding |
Add padding to the text content used when calculating the optimal with for a table. | 设置填充内容,以计算与优化为一个表时所使用的文本内容,一般不需要设置 |
createdCell |
fnCreatedCell |
Cell created callback to allow DOM manipulation | 设置cell创建完后的回调函数,设置背景色或者添加行 |
data |
mData |
Set the data source for the column from the rows data object / array | 设置单元格里的值 |
defaultContent |
sDefaultContent |
Set default, static, content for a column | 设置列的默认值 |
name |
sName |
Set a descriptive name for a column | 设置列的描述性名称 |
orderable |
bSortable |
Enable or disable ordering on this column | 设置列是否可以排序 |
orderData |
aDataSort |
Define multiple column ordering as the default order for a column | 设置多列排序时列的默认顺序 |
orderDataType | sSortDataType | Live DOM sorting type assignment | |
orderSequence |
asSorting |
Order direction application sequence | 设置列的默认排序,可以改变列排序的顺序处理 |
render |
mRender |
Render (process) the data for use in the table | |
searchable |
bSearchable |
Enable or disable filtering on the data in this column | 设置列的数据是否过滤 |
title | sTitle | Set the column title | 设置列的标题 |
type | sType |
Set the column type - used for filtering and sorting string processing. Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available. |
设置列的类型,用于过滤和排序的字符串处理。 |
visible | bVisible | Enable or disable the display of this column | 设置列是否显示 |
width | sWidth | Column width assignment | 定义列的宽度 |
参考资料:http://datatables.Net/reference/option/
---恢复内容结束---
JQuery Datatables Columns API 参数详细说明的更多相关文章
- JQuery中的AJAX参数详细介绍
Jquery中AJAX参数详细介绍 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...
- JQuery插件datatables相关api
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- jquery datatables api (转)
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 最全的jquery datatables api 使用详解
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- jquery datatables api
原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...
- Jquery Datatables 请求参数及接收参数处理
Jquery Datatables 请求参数及接收参数处理 /** * Created by wb-wuyifu on 2016/8/9. */ /** * Created by wb-wuyifu ...
- 转载 Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
- Jquery中AJAX参数详细(1)-转
http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 url S ...
- Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
随机推荐
- .net erp(办公oa)开发平台架构概要说明之表单设计器
背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图 表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...
- Hawk 6. 编译和扩展开发
Hawk是开源项目,因此任何人都可以为其贡献代码.作者也非常欢迎使用者能够扩展出更有用的插件. 编译 编译需要Visual Stuido,版本建议使用2015, 2010及以上没有经过测试,但应该可以 ...
- 高效而稳定的企业级.NET Office 组件Spire(.NET组件介绍之二)
在项目开发中,尤其是企业的业务系统中,对文档的操作是非常多的,有时几乎给人一种错觉的是”这个系统似乎就是专门操作文档的“.毕竟现在的很多办公中大都是在PC端操作文档等软件,在这些庞大而繁重的业务中,单 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- PHP代码优化
1 代码优化 1 尽量静态化 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和 ...
- Maven(一)linux下安装
1.检查是否安装JDK,并且设置了环境变量(JAVA_HOME): echo $JAVA_HOME java -version 运行结果: 显示jdk的安装路径,和java的版本,如: #jdk路径 ...
- [Hadoop in Action] 第5章 高阶MapReduce
链接多个MapReduce作业 执行多个数据集的联结 生成Bloom filter 1.链接MapReduce作业 [顺序链接MapReduce作业] mapreduce-1 | mapr ...
- 网站缓存技术总结( ehcache、memcache、redis对比)
网站技术高速发展的今天,缓存技术已经成为大型网站的一个关键技术,缓存设计好坏直接关系的一个网站访问的速度,以及购置服务器的数量,甚至影响到用户的体验. 网站缓存按照存放的地点不同,可以分为客户端缓存. ...
- 前端自学路线之js篇
上一篇我们讲了前端切图的学习路线,不知大家有没有收获.今天来聊聊前端工程师的核心技能之——JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊 ...