Datables使用总结

本文共四部分:官网 | 基本使用|遇到的问题|属性表

一:官方网站:[http://www.datatables.net/]

二:基本使用:[http://www.guoxk.com/node/jquery-datatables]

1、DataTables的默认配置

$(document).ready(function() {
$('#example').dataTable();
} );

示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、DataTables的一些基础属性配置

"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度

示例:http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、数据排序

$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );

从第0列开始,以第4列倒序排列

示例:http://www.guoxk.com/html/DataTables/Sorting-data.html

4、多列排序

示例:http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、隐藏某些列

$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );

示例:http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、改变页面上元素的位置

$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

示例:http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。

$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );

示例:http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字的翻页样式

$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );

示例:http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平限制宽度

$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );

示例:http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直限制高度

示例:http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直两个方向共同限制

示例:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改变语言

$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );

示例:http://www.guoxk.com/html/DataTables/Change-language-information.html

13、click事件

示例:http://www.guoxk.com/html/DataTables/event-click.html

14/配合使用tooltip插件

示例:http://www.guoxk.com/html/DataTables/tooltip.html

15、定义每页显示数据数量

$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

示例:http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

示例:http://www.guoxk.com/html/DataTables/RowCallback.html

最后一列的值如果为“A”则加粗显示

17、排序控制

$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );

示例:http://www.guoxk.com/html/DataTables/sort.html
说明:第一列点击按默认情况排序,第二列点击已顺序排列,第三列点击一次倒序,二三次顺序,第四五列点击不实现排序

18、从配置文件中读取语言包

$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "cn.txt"
}
} );
} );

19、是用ajax源

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );

示例:http://www.guoxk.com/html/DataTables/ajax.html

20、使用ajax,在服务器端整理数据

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",

"sAjaxSource": "./server_processing.php",
/*如果加上下面这段内容,则使用post方式传递数据
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );

示例:http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21、为每行加载id和class

服务器端返回数据的格式:

{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},

示例:http://www.guoxk.com/html/DataTables/add_id_class.html

22、为每行显示细节,点击行开头的“+”号展开细节显示

示例:http://www.guoxk.com/html/DataTables/with-row-information.html

23、选择多行

示例:http://www.guoxk.com/html/DataTables/selectRows.html

22、集成jQuery插件jEditable

示例:http://www.guoxk.com/html/DataTables/jEditable-integration.html

示例打包下载:http://www.guoxk.com/html/DataTables/DataTables.rar


三、遇到的问题

3.1Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy 

解决办法:http://blog.csdn.net/mickey_miki/article/details/8239185

3.2 排序时指定某列不可排序

  1. $(".datatable").dataTable( {  
  2.         "aoColumnDefs": [ { "bSortable"false"aTargets": [ 0 ] }]  
  3.     });  
注意: "bSort": true, //排序功能 要注释掉

3.3 确定选择每页展示个数列表和默认每页展示个数设置

[javascript] view plaincopy
print?
  1. "aLengthMenu": [[4, 10, 20, -1], [4, 10, 20, "所有"]],  
  2. "iDisplayLength":4  


四、属性表

属性名称

取值局限

申明

bAutoWidth

true or false, default true

是否主动策画表格各列宽度

bDeferRender

true or false, default false

用于衬着的一个参数

bFilter

true or false, default true

开关,是否启用客户端过滤功能

bInfo

true or false, default true

开关,是否显示表格的一些信息

bJQueryUI

true or false, default false

是否应用jquery ui themeroller的风格

bLengthChange

true or false, default true

开关,是否显示一个每页长度的选择条(须要分页器支撑)

bPaginate

true or false, default true

开关,是否显示(应用)分页器

bProcessing

true or false, defualt false

开关,以指定当正在处理惩罚数据的时辰,是否显示“正在处理惩罚”这个提示信息

bScrollInfinite

true or false, default false

开关,以指定是否无穷迁移转变(与sScrollY共同应用),在大数据量的时辰很有效。当这个标记为true的时辰,分页器就默认封闭

bSort

true or false, default true

开关,是否让各列具有按列排序功能

bSortClasses

true or false, default true

开关,指定当当前列在排序时,是否增长classes ""sorting_1"", ""sorting_2"" and ""sorting_3"",打开后,在处理惩罚大数据时,机能有所丧失

bStateSave

true or false, default false

开关,是否打开客户端状况记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或从头打开浏览器,之前的状况都是保存下来的

sScrollX

""disabled"" or? ""100%""?类似的字符串

是否开启程度迁移转变,以及指定迁移转变区域大小

sScrollY

""disabled"" or ""200px""?类似的字符串

是否开启垂直迁移转变,以及指定迁移转变区域大小

--

--

--

选项

?

?

aaSorting

array array[int,string],如[], [[0,""asc""], [0,""desc""]]

指定按多列数据排序的根据

aaSortingFixed

同上

同上。独一不合点是不克不及被用户的自定义设备冲突

aLengthMenu

default [10, 25, 50, 100],可认为一维数组,也可为二维数组,比如:[[10, 25, 50, -1], [10, 25, 50, "All"]]

这个为选择每页的条目数,当应用一个二维数组时,二维层面只能有两个元素,第一个为显示每页条目数的选项,第二个是关于这些选项的申明

aoSearchCols

default null,?类似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}]

给每个列零丁定义其初始化搜刮列表特点(这一块还没搞懂)

asStripClasses

default [""odd"", ""even""],?比如[""strip1"", ""strip2"", ""strip3""]

指定要被应用到各行的class风格,会主动轮回

bDestroy

true or false, default false

用于当要在同一个元素上履行新的dataTable绑按时,将之前的那个数据对象清除掉,换以新的对象设置

bRetrieve

true or false, default false

用于指明当履行dataTable绑按时,是否返回DataTable对象

bScrollCollapse

true or false, default false

指定恰当的时辰缩起迁移转变视图

bSortCellsTop

true or false, default false

(未知的东东)

iCookieDuration

整数,默认7200,单位为秒

指定用于存储客户端信息到cookie中的时候长度,跨越这个时候后,主动过期

iDeferLoading

整数,默认为null

延迟加载,它的参数为要加载条目标数量,凡是与bServerSide,sAjaxSource等共同应用

iDisplayLength

整数,默认为10

用于指定一屏显示的条数,需开启分页器

iDisplayStart

整数,默认为0

用于指定从哪一条数据开端显示到表格中去

iScrollLoadGap

整数,默认为100

用于指定当DataTable设置为迁移转变时,最多可以一屏显示几许条数据

oSearch

默认{ "sSearch": "", "bRegex": false, "bSmart": true }

又是初始时指定搜刮参数相干的,有点错杂,没搞懂今朝

sAjaxDataProp

字符串,default ""aaData""

指定当从办事端获取表格数据时,数据项应用的名字

sAjaxSource

URL字符串,default null

指定要从哪个URL获取数据

sCookiePrefix

字符串,default ""SpryMedia_DataTables_""

当打开状况存储特点后,用于指定存储在cookies中的字符串的前缀名字

sDom

default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)

这是用于定义DataTable布局的一个强大的属性,另开专门文档来补充申明吧

sPaginationType

""full_numbers"" or ""two_button"", default ""two_button""

用于指定分页器风格

sScrollXInner

string default ""disabled""

又是程度迁移转变相干的,没搞懂啥意思


转载于:https://www.cnblogs.com/jinxiang1224/p/8468300.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用方面清理代码

在我以前的文章中&#xff0c;我描述了字母转换&#xff0c;并且提到了我们使用AspectJ解决了该任务&#xff0c;但是我没有提及AspectJ的工作原理以及一般性的方面。 因此&#xff0c;在接下来的几行中&#xff0c;我将解释&#xff1a; 什么是面向方面的编程&#xff0c;为什…

原型 - 实现自己的jQuery

每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom 赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子, 可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子, 不同阶段对…

server.transfer 无法跳转页面_H5 腾讯地图无法导航

uni-app 打包H5腾讯地图无法导航前言&#xff1a;最近几天用uni-app开发安卓和iOS应用&#xff0c;打包成APP安装包后&#xff0c;APP内做地图导航没有问题&#xff0c;APP内使用的是高德地图&#xff1b;但是打包成为H5页面后&#xff0c;运行在微信内置浏览器或者运行在第三方…

打破PermGen神话

在我的最新文章中&#xff0c;我解释了可能导致java.lang.OutOfMemoryError&#xff1a;PermGen空间崩溃的原因 。 现在该讨论该问题的可能解决方案了。 或者&#xff0c;更确切地说&#xff0c;是关于互联网对可能解决方案的建议。 不幸的是&#xff0c;我只能说&#xff0c;我…

android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框

前言用户鼠标移入时&#xff0c;有弹出框出现&#xff0c;这样的需求很常见。这在处理 HTML 元素实现时简单&#xff0c;但是如果是对 HTML5 Canvas 构成的图形进行处理&#xff0c;这种方法不再适用&#xff0c;因为 Canvas 使用的是另外一套机制&#xff0c;无论在 Canvas 上…

【CSS】小妙招,各种问题总结方法处理

1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/       text-overflow:ellipsis; /*超过部分用点点表示*/       white-space:nowrap;/*不换行*/ 2.规定行数的截取效果 text-overflow: ellipsis; /*有些示例里需要定义该属性&#xff0c…

Java2Days 2012:Java EE

Java2Days会议是东欧的主要活动&#xff0c;目的是介绍Java开发的最新趋势。 今年&#xff0c;该活动于10月25日至26日在保加利亚的索非亚举行。 我在那里&#xff0c;并有机会与一些SAP的同事一起品尝了一些最新的Java&#xff0c;云和移动内容&#xff0c;这些内容已直接发送…

c++ 优先队列_C/C++数据结构:队列结构最全解析!带你零基础入门队列结构

前言上一章节针对于C语言栈结构做了解析&#xff0c;不清楚的可以回顾一下。本章节主要针对于C语言的基础数据结构队列做以解析。数据结构之队列队列是一种特殊的 线性表 &#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在…

周期均方根和有效值的区别_黑猪肉和白猪肉有啥区别?

为啥散养黑猪肉的价格要比白猪贵很多?这其中的原因不看不知道!市面上的散养黑猪肉通常要比白猪肉贵很多&#xff0c;但是仍有不少人喜欢买黑猪肉回家吃&#xff0c;散养黑猪肉和白猪肉不仅仅是口感上有所差距&#xff0c;其价值差距体现在很多方面&#xff0c;接下来小编就和大…

测试环境搭建流程_前端构建 DevOps 搭建 DevOps 基础平台(中)

前言搭建基础平台搭建上篇的时候的时候&#xff0c;已经介绍过了项目流程设计、数据库搭建、jwt 登录等模块。此篇我们介绍分支管理设计及其他的基础模块。后端模块DevOps - Gitlab Api使用(已完成&#xff0c;点击跳转)DevOps - 搭建 DevOps 基础平台(已完成 50%)基础平台搭建…

什么是PermGen泄漏?

接下来是对Java应用程序中特定类型的内存问题的实用介绍。 即–我们将分析导致java.lang.OutOfMemoryError&#xff1a;PermGen空间的错误 堆栈跟踪中的症状。 首先&#xff0c;我们将介绍理解该主题所需的核心概念&#xff0c;并说明什么是对象&#xff0c;类&#xff0c;类…

rto净化效率计算公式_全面剖析 石油化工行业RTO蓄热式焚烧炉的优势要素

在我国的国民经济发展中&#xff0c;石油化工产业是重要的能源基础工业&#xff0c;但是废气的治理问题一直困扰着许多企业。直到RTO蓄热式焚烧炉的面世&#xff0c;为石油化工行业的废气治理带来了新希望。如今&#xff0c;有机废气治理工作越来越受到广泛重视&#xff0c;传统…

python作业:高级FTP程序

要求&#xff1a; 用户加密认证允许同时多用户登录每个用户有自己的家目录 &#xff0c;且只能访问自己的家目录对用户进行磁盘配额&#xff0c;每个用户的可用空间不同允许用户在ftp server上随意切换目录允许用户查看当前目录下文件允许上传和下载文件&#xff0c;保证文件一…

webpack学习笔记 (一)

一、安装nodejs&#xff1b; 点击打开nodejs官方站点&#xff1b; 点击下图框住的按钮&#xff0c;下周nodejs安装包&#xff1b; 安装下载好的安装包。 安装完毕之后&#xff0c;在cmd中输入node -v查看是否已经安装成功 如果有版本号显示&#xff0c;则代表安装成功&#xf…

将涡轮增压器添加到JEE Apps

我扮演的关键角色之一是在本地社区中传播Akka。 作为讨论的一部分&#xff0c;人们通常会想到的问题/疑问是Akka如何针对编写良好的Java / JEE应用程序提供更好的可伸缩性和并发性。 由于底层硬件/ JVM保持不变&#xff0c;因此参与者模型如何比传统的JEE应用程序发挥更多的功…

MapReduce的工作原理

一、MapReduce模型框架 MapReduce是一个用于大规模数据处理的分布式计算模型&#xff0c;最初由Google工程师设计并实现的&#xff0c;Google已经将完整的MapReduce论文公开发布了。其中的定义是&#xff0c;MapReduce是一个编程模型&#xff0c;是一个用于处理和生成大规模数据…

react实现多行文本超出加省略号

http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 根据该文章方法&#xff0c;放在react项目中发现并不能实现&#xff0c;仔细观察发现原来react解析出来的css样…

qq群 html,我的群组-普通群组.html

&#xfeff;我的群组&#xff0d;普通群组$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resou…

查看PLC IP 端口_西门子828D数控系统X130接口通讯怪异现象(X130手动设置的 IP)...

西门子828D数控系统&#xff0c;调试PLC过程中遇到网络通信怪异问题(不能直连非要加个路由器)&#xff0c;笔记本电脑的以太网网络直接连接显示网络电缆被拔出&#xff0c;如下图所示&#xff1a;奇怪&#xff0c;怎么出现这种情况了呢&#xff0c;因为我用这台电脑调试过别的P…

bzoj1263

贪心 n%31 分出一个4&#xff0c;其余用3&#xff0c;n%32&#xff0c;分出一个2&#xff0c;其余用3&#xff0c;然后高精度就行了 #include<bits/stdc.h> using namespace std; const int N 5005; struct BigInt {int len;int a[N];BigInt() { memset(a, 0, sizeof(a)…