文档章节

Datatables_API 参数详细说明

喵王不瞌睡
 喵王不瞌睡
发布于 2015/05/02 19:52
字数 2442
阅读 13916
收藏 3

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代码 <EMBED height=15 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=14 src=http://linleizi.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf allowscriptaccess="always" quality="high" flashvars="clipboard=%09%24('%23example').dataTable(%0A%09%09%7B%0A%09%09%09data%3A%20%5B%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon1%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect1%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1201%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh1%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254211%22%0A%09%09%09%09%09%7D%2C%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon2%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect2%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1202%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh2%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254212%22%0A%09%09%09%09%09%7D%2C%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon3%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect3%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1203%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh3%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254213%22%0A%09%09%09%09%09%7D%0A%09%09%09%09%09%0A%09%09%09%5D%2C%0A%09%09%09%0A%09%09%09columnDefs%3A%20%5B%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%200%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%2C%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%20%5B1%2C2%2C3%5D%2C%0A%09%09%09%09%20%20%20%20%22orderData%22%3A%20%5B%202%2C%203%2C%204%20%5D%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%2C%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%20%5B-3%2C-4%5D%2C%0A%09%09%09%09%20%20%20%20%22orderable%22%3A%20false%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%0A%09%09%09%5D%2C%0A%09%09%09%0A%09%09%09columns%3A%20%5B%0A%09%09%09%20%20%20%20%7B%20%22name%22%3A%20%22name%22%2C%20%0A%09%09%09%20%20%20%20%20%20%22cellType%22%3A%20%22th%22%2C%0A%09%09%09%20%20%20%20%20%20%22orderDataType%22%3A%20%22dom-text%22%2C%0A%09%09%09%20%20%20%20%20%20%22orderSequence%22%3A%20%5B%20%22desc%22%2C%22asc%22%2C%20%22asc%22%20%5D%2C%0A%09%09%09%20%20%20%20%20%20%22className%22%3A%20%22my_class%22%2C%0A%09%09%09%20%20%20%20%20%20%22contentPadding%22%3A%20%22mmm%22%2C%0A%09%09%09%20%20%20%20%20%20%22createdCell%22%3A%20function%20(td%2C%20cellData%2C%20rowData%2C%20row%2C%20col)%20%7B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20if%20(%20row%20%3C%201%20)%20%7B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20%20%20%24(td).css('color'%2C%20'red')%3B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20%7D%0A%09%09%09%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%20%20%22data%22%3A%20%22name%22%2C%20%0A%09%09%09%20%20%20%20%20%20%22searchable%22%3A%20true%2C%20%0A%09%09%09%20%20%20%20%20%20%22title%22%3A%20%22My%20Name%22%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%09%7B%20%0A%09%09%09%20%20%20%20%09%22data%22%3A%20%22position%22%2C%0A%09%09%09%09%20%20%20%20%22render%22%3A%20function%20(%20data%2C%20type%2C%20full%2C%20meta%20)%20%7B%0A%09%09%09%09%09%20%09return%20'%3Ca%20href%3D%22'%2Bdata%2B'%22%3E'%20%2B%20data%20%2B%20'%3C%2Fa%3E'%3B%0A%09%09%09%09%09%7D%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%0A%09%09%09%09%09%22data%22%3A%20'phone'%2C%0A%09%09%09%09%20%20%20%20%22render%22%3A%20%7B%0A%09%09%09%09%20%20%20%20%20%20%22_%22%3A%20%22plain%22%2C%0A%09%09%09%09%20%20%20%20%20%20%22filter%22%3A%20%22filter%22%2C%0A%09%09%09%09%20%20%20%20%20%20%22display%22%3A%20%22display%22%0A%09%09%09%09%20%20%20%20%7D%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%20%22data%22%3A%20%22office%22%20%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22start_date%22%2C%20%22type%22%3A%20%22date%22%20%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22extn%22%2C%20%22visible%22%3A%20false%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22salary%22%2C%20%22width%22%3A%20%2220px%22%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%0A%09%09%09%09%20%09%22data%22%3A%20null%2C%0A%09%09%09%09%20%09%22orderable%22%3A%20false%2C%0A%09%09%09%09%20%20%20%20%22defaultContent%22%3A%20%22%3Cbutton%3EEdit%3C%2Fbutton%3E%22%0A%09%09%09%09%7D%0A%0A%09%09%09%5D%0A%09%09%7D%0A%09)%3B" wmode="transparent"> 收藏代码

  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://linleizi.iteye.com/blog/2086351

喵王不瞌睡
粉丝 11
博文 168
码字总数 51103
作品 0
浦东
个人站长
私信 提问
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
2.8K
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0
Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

一、问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做。 后端的分页接口已经写好了,不能修改。接口需要传入页码(pageNumber)和页面显示数据条数(pageSi...

OSC首席混子
04/23
11
0
dataTables相关资料参考

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

ahl123
2018/07/02
0
0
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot Actuator监控应用

微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现异常如何快速定位便成...

zw965
18分钟前
4
0
高性能最终一致性框架Ray之基本概念原理

一、Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案。 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且让编码变得复杂和容易出错。 共享内...

程序员修BUG
19分钟前
4
0
如何去掉子集合功能中的按钮?

解决方案: 1、找到子集合字段 2、打开字段详细信息,在辅助配置里面进行配置 加入JEPaaS技术交流群,了解更多

JEPaaS云平台
20分钟前
5
0
创龙TI KeyStone C66x多核定点/浮点DSP TMS320C665x + Xilinx Artix-7 FPGA处理器;

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
22分钟前
5
0
hbuilder打包常用android权限配置

常用android权限配置 - 开启相机权限 - 允许程序通过WiFi或移动基站的方式获取用户错略的经纬度信息 - 允许程序通过GPS芯片接收卫星的定位信息 - 允许程序获取模拟定位信息,一般用于帮助开发...

小草先森
23分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部