上周因为需要使用了datatable,可是网上搜索到的要么就是一点点的参数介绍,要么就是几个回调函数的介绍,极少数有比较全面的,所以把自己用到的总结了一下,这其中涉及到服务端的分页,其实datatable都给我们集成好了,用起来是很方便的,话不多说,如下:
关于datatable使用详解:
1、基本参数配置:
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理。以下是在进行dataTable绑定处理时候可以附加的参数:

属性名称 取值范围 解释
bAutoWidth true or false,default true 是否自动计算表格各列宽度
bDeferRender 用于渲染的一个参数
bFilter 开关,是否启用客户端过滤功能
bInfo 开关,是否显示表格的一些信息
bJQueryUI 是否使用jquery ui themeroller的风格
bLengthChange 开关,是否显示一个每页长度的选择条(需要分页器支持)
bPaginate 开关,是否显示(使用)分页器
bProcessing 开关,以指定当正在处理数据的时候,是否显示“正在处理”这个提示信息
bScrollInfinite 开关,以指定是否无限滚动(与sScrollY配合使用),在大数据量的时候很有用。当这个标志为true的时候,分页器就默认关闭
bSort 开关,是否让各列具有按列排序功能
bSortClasses 开关,指定当当前列在排序时,是否增加classes 'sorting_1','sorting_2' and 'sorting_3',打开后,在处理大数据时,性能有所损失
bStateSave 开关,是否打开客户端状态记录功能。这个数据是记录在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,-1],[10,"All"]] 这个为选择每页的条目数,当使用一个二维数组时,二维层面只能有两个元素,第一个为显示每页条目数的选项,第二个是关于这些选项的解释
aoSearchCols default null,类似:[null,{"sSearch": "My filter"},null,{"sSearch": "^[0-9]","bEscapeRegex": false}] 给每个列单独定义其初始化搜索列表特性(这一块还没搞懂)
asstripClasses default ['odd','even'],比如['strip1','strip2','strip3'] 指定要被应用到各行的class风格,会自动循环
bDestroy 用于当要在同一个元素上执行新的dataTable绑定时,将之前的那个数据对象清除掉,换以新的对象设置
bRetrieve 用于指明当执行dataTable绑定时,是否返回DataTable对象
bScrollCollapse 指定适当的时候缩起滚动视图
bSortCellsTop (未知的东东)
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' 又是水平滚动相关的,没搞懂啥意思



对于服务器来说,可以通过请求参数来获得当前的操作信息。[也就是说以下这个列表中的属性值都是可以在服务器端的方法中获取到!]这些在下面的例子中aodata中都可以获取得到


类型 名称 说明
int idisplayStart 显示的起始索引
idisplayLength 显示的行数
iColumns 显示的列数
string sSearch 全局搜索字段
boolean bEscapeRegex 全局搜索是否正则
bSortable_(int) 表示一列是否在客户端被标志位可排序
bSearchable_(int) 表示一列是否在客户端被标志位可搜索
sSearch_(int) 个别列的搜索
bEscapeRegex_(int) 个别列是否使用正则搜索
iSortingCols 排序的列数
iSortCol_(int) 被排序的列
sSortDir_(int) 排序的方向 "desc" 或者 "asc".
sEcho DataTables 用来生成的信息


服务器返回的数据格式如下所示
类型 名称 说明
int iTotalRecords 实际的行数
iTotaldisplayRecords 过滤之后,实际的行数。
string sEcho 来自客户端 sEcho 的没有变化的复制品,
sColumns 可选,以逗号分隔的列名,
array array mixed aaData 数组的数组,表格中的实际数据。

回调函数名称 参数 返回值 默认 功能
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完后调用,至于做什么就看着办吧
fnFooterCallback 1.node : "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 有默认的 用于在大数字上,自动加入一些逗号,分隔开
fnHeaderCallback 1.node : "TR" element for the header 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 用于在每次draw发生时,修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set,after filtering 6.string: The string that DataTables has formatted using it's own rules string: The string to be displayed in the information element. 用于传达table信息
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成后调用
fnPreDrawCallback Boolean 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它值,draw可以顺利执行
fnRowCallback 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : "TR" element for the current row 当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用于替换默认发到服务端的请求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded,true otherwise 在cookies中的数据被加载前执行,可以方便地修改这些数据
fnStateSaveCallback 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. String - the full string that should be used to save the state 在状态数据被存储到cookies前执行,可以方便地做一些预操作


其中,涉及到服务器端分页的地方还需要实例来解释:
$("#" + tableId).dataTable({
    "aLengthMenu": [10,15,20],//更改显示记录数选项
"bAutoWidth": true,//是否自适应宽度
"bFilter": false,"columns": [
{
"data": "id","sDefaultContent": "",//此列默认值为"",以防数据中没有此值,DataTables加载数据的时候报错
"bVisible": false //此列不显示
},{
"data": "CallCount","sTitle": "访问次数","sClass": "left"
},{
"data": "update","sTitle": "编辑","sClass": "left"
}
],"oLanguage": { //国际化配置
"sProcessing": "正在获取数据,请稍后...","sLengthMenu": "显示 _MENU_ 条","sZeroRecords": "没有您要搜索的内容","sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条","sInfoEmpty": "记录数为0","sInfoFiltered": "(全部记录数 _TOTAL_ 条)","sInfoPostFix": "","sSearch": "搜索","sUrl": "","oPaginate": {
"sFirst": "第一页","sPrevIoUs": "上一页","sNext": "下一页","sLast": "最后一页"
}
},//fnInitComplete:当datatable初始化完成之后,我显示了我自己添加的日期的搜索,以及审核按钮,主要目的是用户体验优化
"fnInitComplete": function () {
$('#time_select').css("display","inline-block");
$('#audit_pass').css("display","inline-block");
},"bProcessing": false,//是否显示加载
"sAjaxSource": '/admin/Developer/getDeveloperData',//请求资源路径
"serverSide": true,//开启服务器处理模式
"fnDrawCallback":function(){
//修改事件
$('.update-span').click(function () {
var oTable = $('#'+tableId).dataTable();
var b = oTable.fnGetData($(this).parent().parent());
$('#son_form').css('display','block');
addFormData(b);
});
},"fnServerParams": function (aoData) {
aoData.push({ "name": "status","value": $('#audit').val() });
aoData.push({ "name": "beginTime","value": $('#start_date').val() });
aoData.push({ "name": "endTime","value": $('#end_date').val() });
},"fnServerData": function (sSource,aoData,fnCallback) {
$.ajax({
'type': 'post',"url": sSource,"dataType": "json","data": { 'aoData': JSON.stringify(aoData) },//"aodata": JSON.stringify(aoData)
"success": function (resp) {
var msgJson = new Object();
msgJson = packagingdatatabledata(resp);
var msgString = JSON.stringify(msgJson);
var a = eval('(' + msgString + ')');
fnCallback(a);
}
});
}
});


而在我自己的事件请求中,可以直接调用datatable的方法完成页面的重绘

$.ajax({
type: 'post',//可选get
url: '/admin/Developer/checkData',data: { 'user_Id': JSON.stringify(a) },dataType: 'json',//服务器返回的数据类型 可选XML,Json jsonp script htmltext等
success: function (msg) {
$('#' + tableId).dataTable().fnDraw();
},error: function () {
}
});


对datatable()进行输出以后,可以发现这些
  1. $("#" + tableId).dataTable():init[1]
    1. 0:table#tableId.jq-table.dataTable.no-footer.table.table-striped.table-bordered
    2. $:(a,b)
    3. _:(a,b)
    4. _fnAddColumn:()
    5. _fnAddData:()
    6. _fnAddOptionsHtml:()
    7. _fnAddTr:()
    8. _fnAdjustColumnSizing:()
    9. _fnAjaxDataSrc:()
    10. _fnAjaxParameters:()
    11. _fnAjaxUpdate:()
    12. _fnAjaxUpdateDraw:()
    13. _fnApplyColumnDefs:()
    14. _fnApplytochildren:()
    15. _fnBindAction:()
    16. _fnbrowserDetect:()
    17. _fnBuildAjax:()
    18. _fnBuildHead:()
    19. _fncalculateColumnWidths:()
    20. _fncalculateEnd:()
    21. _fnCallbackFire:()
    22. _fnCallbackReg:()
    23. _fnCamelToHungarian:()
    24. _fnClearTable:()
    25. _fnColumnIndexToVisible:()
    26. _fnColumnoptions:()
    27. _fnColumnTypes:()
    28. _fnConvertToWidth:()
    29. _fnCreateTr:()
    30. _fnDataSource:()
    31. _fnDeleteIndex:()
    32. _fnDetectHeader:()
    33. _fnDraw:()
    34. _fnDrawHead:()
    35. _fnescapeRegex:()
    36. _fnExternApiFunc:()
    37. _fnFeatureHtmlFilter:()
    38. _fnFeatureHtmlInfo:()
    39. _fnFeatureHtmlLength:()
    40. _fnFeatureHtmlPaginate:()
    41. _fnFeatureHtmlProcessing:()
    42. _fnFeatureHtmlTable:()
    43. _fnFilter:()
    44. _fnFilterColumn:()
    45. _fnFilterComplete:()
    46. _fnFilterCreateSearch:()
    47. _fnFilterCustom:()
    48. _fnFilterData:()
    49. _fnGetCellData:()
    50. _fnGetColumns:()
    51. _fnGetDataMaster:()
    52. _fnGetMaxLenString:()
    53. _fnGetobjectDataFn:()
    54. _fnGetRowElements:()
    55. _fnGetUniqueThs:()
    56. _fnGetWidestNode:()
    57. _fnHungarianMap:()
    58. _fnInfoMacros:()
    59. _fnInitComplete:()
    60. _fnInitialise:()
    61. _fnInvalidate:()
    62. _fnLanguageCompat:()
    63. _fnLengthChange:()
    64. _fnLengthOverflow:()
    65. _fnLoadState:()
    66. _fnLog:()
    67. _fnMap:()
    68. _fnNodetoColumnIndex:()
    69. _fnNodetoDataIndex:()
    70. _fnPageChange:()
    71. _fnProcessingdisplay:()
    72. _fnReDraw:()
    73. _fnRenderer:()
    74. _fnRowAttributes:()
    75. _fnSaveState:()
    76. _fnScrollBarWidth:()
    77. _fnScrollDraw:()
    78. _fnScrollingWidthAdjust:()
    79. _fnSetCellData:()
    80. _fnSetobjectDataFn:()
    81. _fnSettingsFromNode:()
    82. _fnSort:()
    83. _fnSortAria:()
    84. _fnSortAttachListener:()
    85. _fnSortData:()
    86. _fnSortFlatten:()
    87. _fnSortListener:()
    88. _fnSortingClasses:()
    89. _fnSplitObjNotation:()
    90. _fnStringToCss:()
    91. _fnThrottle:()
    92. _fnUpdateInfo:()
    93. _fnVisbleColumns:()
    94. _fnVisibletoColumnIndex:()
    95. api:(a)
    96. context:document
    97. fnAddData:(a,b)
    98. fnAdjustColumnSizing:(a)
    99. fnClearTable:(a)
    100. fnClose:(a)
    101. fnDeleteRow:(a,b,c)
    102. fnDestroy:(a)
    103. fnDraw:(a)
    104. fnFilter:(a,c,e,d,h)
    105. fnGetData:(a,b)
    106. fnGetNodes:(a)
    107. fnGetPosition:(a)
    108. fnIsOpen:(a)
    109. fnopen:(a,c)
    110. fnPageChange:(a,b)
    111. fnSetColumnVis:(a,c)
    112. fnSettings:()
    113. fnSort:(a)
    114. fnSortListener:(a,c)
    115. fnUpdate:(a,d)
    116. fnVersionCheck:(a)
    117. internal:Object
    118. length:1
    119. oApi:Object
    120. selector:"#tableId"

    这样一看,大概就知道了datatable的一些外部调用函数

    fnAddData : (a,b)
    fnAdjustColumnSizing : (a)
    fnClearTable : (a)
    fnClose : (a)
    fnDeleteRow : (a,c)
    fnDestroy : (a)
    fnDraw : (a)
    fnFilter : (a,h)
    fnGetData : (a,b)
    fnGetNodes : (a)
    fnGetPosition : (a)
    fnIsOpen : (a)
    fnopen : (a,c)
    fnPageChange : (a,b)
    fnSetColumnVis : (a,c)
    fnSettings : ()
    fnSort : (a)
    fnSortListener : (a,c)
    fnUpdate : (a,d)
    fnVersionCheck : (a)

    随便找一个试试,果然是的
    再找一个验证一下
    OK

    datatable参数和服务端ajax函数配置及说明的更多相关文章

    1. 应用程序关闭时的iOS任务

      我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

    2. swift3.0-第一篇tableView

      最近这个月估计要一直设计新的项目天天开会苦不堪言啊~新的项目要用swift来写,从零开始还是很有乐趣的,简单总结了下table的使用,一起学习下吧。直接上代码了感谢观看,学以致用更感谢哦~

    3. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

      解决方法您是否在索引文件中包含了内容安全元标记?

    4. Ajax简单的异步交互及Ajax原生编写

      一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

    5. Ajax跨域问题的解决办法汇总(推荐)

      本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

    6. ajax编写简单的登录页面

      这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    7. ajax从JSP传递对象数组到后台的方法

      今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    8. 解决ajax返回验证的时候总是弹出error错误的方法

      这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

    9. 使用AJAX完成用户名是否存在异步校验

      这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

    10. ajax实现无刷新省市县三级联动

      这篇文章主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料,利用三层架构实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    随机推荐

    1. xe-ajax-mock 前端虚拟服务

      最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

    2. vue 使用 xe-ajax

      安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

    3. AJAX POST数据中文乱码解决

      前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

    4. Koa2框架利用CORS完成跨域ajax请求

      实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

    5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

    6. ajax的cache作用

      filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

    7. 浅谈ajax上传文件属性contentType = false

      默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

    8. 909422229_ajaxFileUpload上传文件

      ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

    9. AJAX-Cache:一款好用的Ajax缓存插件

      原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

    10. jsf – Ajax update/render在已渲染属性的组件上不起作用

      我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

    返回
    顶部