dataTables使用整理(一)
初次使用dataTables,对一些用到的属性及遇到的问题做一个简要的记录
参考资料:
http://blog.csdn.net/mickey_miki/article/details/8240477/
http://www.mamicode.com/info-detail-621566.html
http://blog.csdn.net/ly210501076/article/details/46817375/
属性 | 取值局限 | 说明 |
bAutoWidth | true or false ,default true | 是否主动策画表格各列宽度[是否启用自动适应列宽] |
bJQueryUI | true or false, default false | 是否应用jquery ui themeroller的风格 |
sScrollY | "disabled" or "200px"类似的字符串 | 是否开启垂直迁移转变,以及指定迁移转变区域大小 |
sScrollX | "disabled" or "100%"类似的字符串 | 是否开启程度迁移转变,以及指定迁移转变区域大小 |
bStateSave | true or false, default false |
开关,是否打开客户端状况记录功能。这个数据是记录 在cookies中的,
打开了这个记录后,即使刷新一次页面, 或从头打开浏览器,之前的状况都是保存下来的
|
bDeferRender | true or false, default false | 用于衬着的一个参数 |
bProcessing | true or false, defualt false |
开关,以指定当正在处理惩罚数据的时辰,
是否显示“正在处理惩罚”这个提示信息
|
bServerSide | true or false, defualt false | 是否启用服务器处理数据源,必须使用sAjaxSource指明数据源位置 |
sAjaxSource | URL字符串,default null | 指定要从哪个URL获取数据 |
fnServerParams | 无默认值 | 用来在向服务器发送Ajax请求时发送额外的数据 |
bSort | true or false, default true | 开关,是否让各列具有按列排序功能【单独列,在每列设置中使用bSortable指定】 |
bInfo | true or false , default true | 开关,是否显示表格的一些信息【是否显示页脚信息】 |
bPaginate | true or false, default true | 开关,是否显示(应用)分页器 |
bRetrieve | true or false, default false | 用于指明当履行dataTable绑按时,是否返回DataTable对象 |
bDestroy | true or false, default false | 用于当要在同一个元素上履行新的dataTable绑按时,
将之前的那个数据对象清除掉,换以新的对象设置
|
fnServerData | —— | 以使用该参数重写从服务器获取数据的方法 【详见参考资料】 |
oLanguage | —— | 自定义语言设置 |
bVisible | true or false, default true | false 隐藏 true不隐藏 |
aoColumnDefs | —— | 隐藏某些列等 对列的一系列处理,与aoColumns的区别见:http://www.07net01.com/zhishi/178827.html |
aoColumns | —— | 排序控制等 对列的一系列处理 |
sPaginationType | "full_numbers" or"two_button" | 用于指定分页器风格default ""two_button"" |
bScrollCollapse | true or false, default false | 指定恰当的时辰缩起迁移转变视图【是否开启内置滚动条,并且显示所有数据】 |
aaSorting | array array[int,string] | 指定按多列数据排序的根据如[], [[0,"asc"], [0,"desc"]] |
bSortClasses | true or false, default true | 开关,指定当当前列在排序时,是否增加classes "sorting_1", "sorting_2"and "sorting_3",
打开后,在处理惩罚大数据时,机能有所丧失
|
/*
* 默认为true
* 是否自动计算列宽,计算列宽会花费一些时间,如果列宽通过aoColumns传递,可以关闭该属性作为优化
* 建议设为false
*/
"bAutoWidth":true,
/*
* 默认为fasle
* 是否开启jQuery UI ThemeRoller支持,需要一些ThemeRoller使用的标记,这些标记有些与DataTable传统使用的有轻微的差异,有些是额外附加的
*/
"bJQueryUI":false, /*
* 默认为空字符串,即:无效
* 是否开启垂直滚动,垂直滚动会驱使DataTable设置为给定的长度,任何溢出到当前视图之外的数据可以通过垂直滚动进行察看
* 当在小范围区域中显示大量数据的时候,可以在分页和垂直滚动中选择一种方式,该属性可以是css设置,或者一个数字(作为像素量度来使用)
*/
"sScrollY":"100%",
/*
* 默认为空字符串,即:无效
* 是否开启水平滚动,当一个表格过于宽以至于无法放入一个布局的时候,或者表格有太多列的时候,你可以开启该选项
* 从而在一个可横向滚动的视图里面展示表格,该属性可以是css设置,或者一个数字(作为像素量度来使用)
*/
"sScrollX":"100%", /*
* 默认为false
* 是否开启状态保存,当选项开启的时候会使用一个cookie保存表格展示的信息的状态,例如分页信息,展示长度,过滤和排序等
* 这样当终端用户重新加载这个页面的时候可以使用以前的设置
* 简单来说:是否开启cookies保存当前状态信息
*/
"bStateSave":false,
/*
* 默认为false
* 是否延迟渲染,当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提升
* 当该属性设置为true时,表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来
* 简单来说: 是否启用延迟加载:当你使用AJAX数据源时,可以提升速度。
*/
"bDeferRender":false, /*
* 默认为false
* 当表格在处理的时候(比如排序操作)是否显示“处理中...”
* 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候,该选项会有些用处
* 简单来说:是否启用进度显示,进度条等等,对处理大量数据很有用处。
*/
"bProcessing":false, /*
* 默认为false
* 配置DataTable使用服务器端处理,注意,sAjaxSource参数必须指定,以便给DataTable一个为每一行获取数据的数据源
* 简单来说:是否启用服务器处理数据源,必须sAjaxSource指明数据源位置
*/
"bServerSide":false, /*
* sAjaxSource
* 默认为null
* 该参数用来向DataTable指定加载的外部数据源(如果想使用现有的数据,请使用aData)
* 可以简单的提供一个可以用来获得数据url或者JSON对象,该对象必须包含aaData,作为表格的数据源
*/
"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php" /*
* bDestroy
* 默认为false
* 使用传递的新的初始化对象中的属性构造一个新的表格,并替换一个匹配指定的选择器的表格
* 如果没有匹配到表格,新的表格会被作为一个普通表格被构建
*/
$(‘selector‘).dataTable({
"bFilter": false,
"bDestroy": true
}); /*
* bRetrieve
* 默认为false
* 使用指定的选择器检索表格,注意,如果表格已经被初始化,该参数会直接返回已经被创建的对象
* 并不会顾及你传递进来的初始化参数对象的变化,将该参数设置为true说明你确认已经明白这一点
* 如果你需要的话,bDestroy可以用来重新初始化表格
*/
$(document).ready(function(){
initTable();
tableActions();
}); function initTable()
{
return $(‘#example‘).dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bRetrieve": true
});
} function tableActions()
{
var oTable = initTable();
// perform API operations with oTable
} /*
* 默认为true
* 是否显示表格信息,是指当前页面上显示的数据的信息,如果有过滤操作执行,也会显示过滤操作的信息
* 简单来说: 是否显示页脚信息
*/
"bInfo":true, /*
* 默认为true
* 是否开启列排序,对单独列的设置在每一列的bSortable选项中指定
* 即:是否开启列排序功能,如果想禁用某一列排序,可以在每列设置使用bSortable参数
*/
"bSort":true, /*
* 默认为true
* 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class,当该列被排序的时候,可以切换其背景颜色
* 该选项作为一个来回切换的属性会增加执行时间(当class被移除和添加的时候)
* 当对大数据集进行排序的时候你或许希望关闭该选项
*建议:如果处理大量数据时,将其关闭关闭
*/
"bSortClasses":true, /*
* bScrollCollapse
* 默认为false
* 当垂直滚动被允许的时候,DataTable会强制表格视图在任何时候都是给定的高度(对布局有利)
* 不过,当把数据集过滤到十分小的时候看起来会很古怪,而且页脚会留在最下面
* 当结果集的高度比给定的高度小时该参数会使表格高度自适应
* 简单来说:是否开启内置滚动条,并且显示所有数据;是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
*/
$(document).ready(function(){
$(‘#example‘).dataTable( {
"sScrollY": "200",
"bScrollCollapse": true
});
}); /*
* fnServerParams
* 无默认值
* 用来在向服务器发送Ajax请求时发送额外的数据,例如自定义的过滤信息,该函数使向服务器发送额外参数变得简单
* 传递进来的参数是DataTable建立的数据集合,你可以根据需要添加或者修改该集合
*/
$(document).ready(function(){
$(‘#example‘).dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "my_value" } );
}
});
}); /*
* sPaginationType
* 默认为two_button
* DataTable内建了两种交互式分页策略,两个按钮和全页数,展现给终端用户不同的控制方式
* 可以通过API增加策略
*/
$(document).ready(function(){
$(‘#example‘).dataTable( {
"sPaginationType": "full_numbers"
});
}) /*
* fnInitComplete
* 无默认值
* 当表格被初始化后调用该函数,通常DataTable会被持续初始化,并不需要该函数
* 可是,当使用异步的XmlHttpRequest从外部获得语言信息时,初始化并不是持续的
*/
$(document).ready( function(){
$(‘#example‘).dataTable({
"fnInitComplete": function(oSettings, json) {
alert( ‘DataTables has finished its initialisation.‘ );
}
});
})
dataTables使用整理(一)的更多相关文章
- dataTables 使用整理
官方网站:http://www.datatables.net/ 简介:DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HT ...
- dataTables 插件学习整理
在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...
- dataTables使用的详细说明整理
本文共三个部分:官网|基本使用|遇到的问题 一.官方网站:http://www.datatables.club/ 二.基本使用: 1.dataTables的引入及初始化 <!--第一步:引入Ja ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- jquery.datatables中文使用说明
http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方 ...
- dataTables-使用详细说明整理
本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jqu ...
- Jquery_JQuery之DataTables强大的表格解决方案
1.DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk ...
- JQuery之DataTables强大的表格解决方案
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- 插件笔记——dataTables使用说明
jquery DataTables中文使用说明 出处:http://blog.vunso.com/201405/jquery-datatables%E4%B8%AD%E6%96%87%E4%BD%BF ...
随机推荐
- linux 下面压缩、解压.rar文件
一,解压问题 在网上下东西的时候,经常会遇到.rar后缀的文件,我用tar解压,解压不出,上网找啊找,一直没找到什么合适的工具来压缩和解压.rar后缀的文件,现在我找到了. 二,rar和unrar安装 ...
- js call 和 apply方法记录
最近看到一篇很好的讲解apply和call的文章转了过来,若涉及版权问题请联系本人删除 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用 ...
- Django的View
一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. ...
- php 一个文件搞定支付宝支付,微信支付
博客:https://me.csdn.net/jason19905 支付宝支付:https://github.com/dedemao/alipay 微信支付:https://github.com/de ...
- forever 用法
安装过Node.js后再安装forever,需要加-g参数,因为forever要求安装到全局环境下: npm install forever -g 常用指令: npm install forever ...
- tf.argmax()以及axis解析
首先,明确一点,tf.argmax可以认为就是np.argmax.tensorflow使用numpy实现的这个API. 简单的说,tf.argmax就是返回最大的那个数值所在的下标. 这个 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- IDEA安装与破解
今天下午偶然在知乎上看到IDEA和eclipse的软件分析,所以装了一个IDEA,不过肯定是破解,不会购买激活码 IDEA官网:http://www.jetbrains.com/idea/ 安装教程: ...
- 买不到的数目|2018年蓝桥杯A组题解析第八题-fishers
买不到的数目 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的两种.糖果不能拆包卖. 小朋友来买糖的时候,他就用这两种包装来组合.当然有些糖果数目是无法组合出来的,比如要买 10 颗糖 ...
- .net Core 2.1 后 Session保存,新页面获取不到值
https://blog.csdn.net/kuui_chiu/article/details/81060051 https://blog.csdn.net/niunan/article/detail ...