文档章节

JQuery Datatables Columns API 参数详细说明

银月光海
 银月光海
发布于 2016/06/12 20:21
字数 1038
阅读 1315
收藏 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代码 

 收藏代码

  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

共有 人打赏支持
银月光海

银月光海

粉丝 37
博文 365
码字总数 46223
作品 0
浦东
项目经理
私信 提问
DataTables_详细使用方法

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

喵王不瞌睡
2015/05/02
0
1
jQuery的DataTables插件的使用方法

一:官方网站:http://www.datatables.net/ 二:基本使用:http://www.guoxk.com/node/jquery-datatables 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable......

星痕2018
2013/03/01
0
0
在 Grails 中使用 jQuery 和 DataTables

本文介绍如何构建一个基于 Grails 的数据浏览器来可视化复杂的表格数据。 我是 Grails 的忠实粉丝。当然,我主要是热衷于利用命令行工具来探索和分析数据的数据从业人员。数据从业人员经常需...

作者: Chris Hermansen
11/24
0
0
使用jQuery表格插件 DataTables 碰到的一个问题

使用jQuery表格插件 DataTables ,在后台查询数据库数据,转换成json串到前台通过 DataTables 组件显示数据表格。 现在碰到的问题是,如果查询出的数据存在null值,DataTables 就会报错,报错...

叶落花开
2012/02/05
2.5K
1
Datatables + Bootstrap 组合基础示例 2

前言 示例 1 请见[上一篇博文][1]。 示例 2 Datatables 插件使用 Bootstrap 框架的组合示例。 功能 分页 / 排序 / 过滤 / json 数据源 / 数据导出 (需 flash 支持) / 自定义列 / 自定义分页选...

星塵子
2013/05/05
0
1

没有更多内容

加载失败,请刷新页面

加载更多

2018最新Web前端经典面试试题及答案

javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 请用js去除字符串空格? 方法一...

Jack088
9分钟前
0
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
14分钟前
0
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
14分钟前
1
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
33分钟前
5
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
44分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部