JQuery插件之Jquery.datatables.js⽤法及api 1、DataTables的默认配置
$(document).ready(function() {
$(‘#example’).dataTable();
} );
⽰例：
2、DataTables的⼀些基础属性配置
“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显⽰数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//⾃动宽度
⽰例：
3、数据排序
$(document).ready(function() {
$(‘#example’).dataTable( {
“aaSorting”: [
[ 4, "desc" ]
]
} );
} );
从第0列开始，以第4列倒序排列
⽰例：
4、多列排序
⽰例：
5、隐藏某些列
$(document).ready(function() {
$(‘#example’).dataTable( {
“aoColumnDefs”: [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ “bVisible”: false, “aTargets”: [ 3 ] }
] } );
} );
⽰例：
6、改变页⾯上元素的位置
开通小程序流程$(document).ready(function() {
$(‘#example’).dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>’
} );
} );
jquery下载文件插件//l- 每页显⽰数量
//f – 过滤输⼊
//t – 表单Tablephp开发平台包括哪些
//i – 信息
/
/p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>, <lf<t>ip>
7、状态保存，使⽤了翻页或者改变了每页显⽰数据数量，会保存在cookie中，下回访问时会显⽰上⼀次关闭页⾯时的内容。$(document).ready(function() {
$(‘#example’).dataTable( {
“bStateSave”: true
} );
} );
⽰例：
8、显⽰数字的翻页样式
$(document).ready(function() {
$(‘#example’).dataTable( {
“sPaginationType”: “full_numbers”
} );
} );
⽰例：
9、⽔平限制宽度
$(document).ready(function() {
$(‘#example’).dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”,
“bScrollCollapse”: true
} );
} );
⽰例：
10、垂直限制⾼度
⽰例：
11、⽔平和垂直两个⽅向共同限制
⽰例：
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’ />”
}
} );
} );
⽰例：
13、click事件
⽰例：
14/配合使⽤tooltip插件
15、定义每页显⽰数据数量
$(document).ready(function() {
$(‘#example’).dataTable( {
“aLengthMenu”: [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
⽰例：
16、row callback
⽰例：
开发者工具怎么导入别人的项目最后⼀列的值如果为“A”则加粗显⽰
17、排序控制
$(document).ready(function() {
$(‘#example’).dataTable( {
“aoColumns”: [
null,
{ "asSorting": [ "asc" ] },
{ “asSorting”: [ "desc", "asc", "asc" ] },
{ “asSorting”: [ ] },
{ “asSorting”: [ ] }
]
} );
} );
⽰例：
说明：第⼀列点击按默认情况排序，第⼆列点击已顺序排列，第三列点击⼀次倒序，⼆三次顺序，第四五列点击不实现排序18、从配置⽂件中读取语⾔包
$(document).ready(function() {
$(‘#example’).dataTable( {
“oLanguage”: {
“sUrl”: “cn.txt”
}
} );
} );
19、是⽤ajax源
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“sAjaxSource”: ‘./’
} );
} );
⽰例：
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传递数据
} );
} );
⽰例：
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”
},
⽰例：
22、为每⾏显⽰细节，点击⾏开头的“+”号展开细节显⽰
⽰例：
23、选择多⾏
⽰例：
22、集成jQuery插件jEditable
⽰例：
更过参考：android什么意思怎么关闭
要注意的是，要被dataTable处理的table对象，必须有thead与tbody，⽽且，结构要规整（数据不⼀定要完整），这样才能正确处理。
以下是在进⾏dataTable绑定处理时候可以附加的参数：
属性名称取值范围解释
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'⼜是⽔平滚动相关的，没搞懂啥意思
DataTable⽀持如下回调函数
回调函数名称参数返回值默认功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to
be stored in the cookie 3.string: Cookie expires string 4.string: Path
of the cookie to set
string: cookie formatted
string (which should be
encoded by using
encodeURIComponent())
null
当每次
cookies
改变时，
会触发这
个函数调
登陆界面设计软件⽤
fnDrawCallback⽆⽆⽆在每次table被draw完后调⽤，⾄于做什么就看着办吧
de : "TR" element for the footer 2.array array strings : Full table
data (as derived from the original HTML) 3.int : Index for the current
display starting point in the display array< 4.int : Index for the current
display ending point in the display array 5.array int : Index array to
translate the visual position to the full data array
⽆⽆
⽤于在每
次重画的
时候修改
表格的脚
部
fnFormatNumber 1.int : number to be formatted String : formatted string
for DataTables to show
the number
有默认的
⽤于在⼤
数字上，
⾃动加⼊
⼀些逗
号，分隔
开
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论