文档章节

JQuery Datatables Columns API 参数详细说明

银月光海
 银月光海
发布于 2016/06/12 20:21
字数 1038
阅读 1203
收藏 3
点赞 0
评论 0

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:Js代码 

 收藏代码

  1. $('#example').dataTable(  
  2.     {  
  3.         data: [  
  4.                 {  
  5.                     "name":    "Tiger Nixon1",  
  6.                     "position":   "System Architect1",  
  7.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
  8.                     "salary":    "$3,1201",  
  9.                     "start_date": "2011/04/25",  
  10.                     "office":    "Edinburgh1",  
  11.                     "extn":    "54211"  
  12.                 },  
  13.                 {  
  14.                     "name":    "Tiger Nixon2",  
  15.                     "position":   "System Architect2",  
  16.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
  17.                     "salary":    "$3,1202",  
  18.                     "start_date": "2011/04/25",  
  19.                     "office":    "Edinburgh2",  
  20.                     "extn":    "54212"  
  21.                 },  
  22.                 {  
  23.                     "name":    "Tiger Nixon3",  
  24.                     "position":   "System Architect3",  
  25.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
  26.                     "salary":    "$3,1203",  
  27.                     "start_date": "2011/04/25",  
  28.                     "office":    "Edinburgh3",  
  29.                     "extn":    "54213"  
  30.                 }  
  31.                   
  32.         ],  
  33.           
  34.         columnDefs: [  
  35.             {  
  36.                 "targets": 0,  
  37.                 "searchable": false  
  38.             },  
  39.             {  
  40.                 "targets": [1,2,3],  
  41.                 "orderData": [ 2, 3, 4 ],  
  42.                 "searchable": false  
  43.             },  
  44.             {  
  45.                 "targets": [-3,-4],  
  46.                 "orderable": false,  
  47.                 "searchable": false  
  48.             }  
  49.         ],  
  50.           
  51.         columns: [  
  52.             { "name": "name",   
  53.               "cellType": "th",  
  54.               "orderDataType": "dom-text",  
  55.               "orderSequence": [ "desc","asc", "asc" ],  
  56.               "className": "my_class",  
  57.               "contentPadding": "mmm",  
  58.               "createdCell": function (td, cellData, rowData, row, col) {  
  59.                   if ( row < 1 ) {  
  60.                     $(td).css('color', 'red');  
  61.                   }  
  62.                 },  
  63.               "data": "name",   
  64.               "searchable": true,   
  65.               "title": "My Name"  
  66.             },  
  67.             {   
  68.                 "data": "position",  
  69.                 "render": function ( data, type, full, meta ) {  
  70.                     return '<a href="'+data+'">' + data + '</a>';  
  71.                 }  
  72.             },  
  73.             {  
  74.                 "data": 'phone',  
  75.                 "render": {  
  76.                   "_": "plain",  
  77.                   "filter": "filter",  
  78.                   "display": "display"  
  79.                 }  
  80.             },  
  81.             { "data": "office" },  
  82.             { "data": "start_date", "type": "date" },  
  83.             { "data": "extn", "visible": false},  
  84.             { "data": "salary", "width": "20px"  },  
  85.             {  
  86.                 "data": null,  
  87.                 "orderable": false,  
  88.                 "defaultContent": "<button>Edit</button>"  
  89.             }  
  90.   
  91.         ]  
  92.     }  
  93. );  

  

参数详解:

用户参数名 源码参数名 英文解释 中文解释

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/

本文转载自:http://linleizi.iteye.com/blog/2086351

共有 人打赏支持
银月光海

银月光海

粉丝 34
博文 341
码字总数 46223
作品 0
浦东
项目经理
DataTables 1.10.19 发布,jQuery 表格插件

DataTables 1.10.19 已发布,DataTables 是一个 jQuery 的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何 HTML 表格。 未找到该版本的具体更新内...

淡漠悠然 ⋅ 昨天 ⋅ 0

dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123 ⋅ 06/20 ⋅ 0

cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi ⋅ 04/20 ⋅ 0

基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan ⋅ 06/21 ⋅ 0

mofum/mofumui-R0508

一款基于JQuery,Requare框架的建立起来的具有面向对象特性的便于灵活组织各个组件的UI框架。用极少的代码和语言去组织网页内容。它是一个以JS渲染界面为主的界面库,也就是使用它你可以尽量...

mofum ⋅ 05/22 ⋅ 0

深入理解javascript系列(十八):掌握面向对象(1)

面向对象,一个老生常谈的话题,但你有没有想过面向对象要解决什么问题? 有一位大神说的很直接,”面向对象要解决的问题,并不是封装、继承和多态,而是写代码的套路“。 我觉得有理,所以简...

Panthon ⋅ 06/20 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 06/19 ⋅ 0

Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi ⋅ 06/22 ⋅ 0

专注于API的管理后台 - ApiAdmin

站在巨人的肩膀上,并不是高的表现,反而使自己变得渺小~只有吸收了巨人的营养,茁壮自己才是真正的高大! --笔者 ApiAdmin 前端页面 ApiAdmin3.0是一个前后端完全分离的项目,前端采用Vue构...

ZHXI ⋅ 2016/11/21 ⋅ 21

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部