JQuery DataTable的配置项及事件
当我们需要在加载或者显示表格的时候,改变jquery datatable 的数据,或增加一些html标签处理。
可以通过Jquery DataTable的回调函数处理。
实例代码:

if (oTable != null) { oTable.fnDestroy(); };
var detail="../Pages/detail/detail.aspx?oper=edit&id=";
oTable = $("#TableSuspectList").dataTable({
"aaData": tabledata, "bPaginate": false, "sPaginationType": "full_numbers",
"bPaginate": true, //翻页功能
"bLengthChange": false, //改变每页显示数据数量
"iDisplayLength": 10,
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "正在加载中......",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoEmpty": "显示0到0条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"sScrollY": "100%", "sScrollX": "100%",
"bFilter": false, "bProcessing": false,
"bScrollInfinite": false,
"bInfo": false, "bDestroy": true,
"fnCreatedRow": function (nRow, aData, iDisplayIndex) {
$('td:eq(7)', nRow).html("<a href=\"javascript:void(0);\"
onclick=\"OpenTab('" + aData[1] + ":详情','" + detail
+ aData[0] + "&LawCaseID="+LawCaseID + "');\">详情</a>");
return nRow;
}
});

fnCookieCallback:还没有使用过回调函数说明:

$(document).ready( function () {
$('#example').dataTable( {
"fnCookieCallback": function (sName, oData, sExpires, sPath) {
// Customise oData or sName or whatever else here
return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
}
} );
} );

fnCreatedRow:顾名思义,创建行得时候的回调函数

$(document).ready( function() {
$('#example').dataTable( {
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
// 为a的话字体加粗
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );


$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
alert( 'DataTables 重绘了' );
}
} );
} );

fnDrawCallback:draw画 ,这个应该是重绘的回调函数
fnInitComplete:datatables初始化完毕后会调用这个方法

$(document).ready( function() {
$('#example').dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables 初始化完毕' );
}
} );
} )


$(document).ready( function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// 所有的a都加粗
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );

fnRowCallback:行的回调函数(所有行得回调函数)
fnServerData:这个是结合服务器模式的回调函数,用来处理服务器返回过来的数据

// POST data to server
$(document).ready( function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "xhr.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
JQuery DataTable的配置项及事件的更多相关文章
- 使用jquery.datatable.js注意事项
本文链接:https://blog.csdn.net/ylg01/article/details/76463908写在最前面的话,如果不是维护老项目或者在老项目上二次开发尽量不要用这个表格插件 为什么 ...
- jquery dataTable汉化(插件形式)
1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- jQuery之Ajax--全局Ajax事件处理器
1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery如何给body绑定事件?
jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
随机推荐
- JavaScript学习笔记2_面向对象
1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器 ...
- 移动端刷新组件XtnScroll--Angular4实现
刷新组件 - 主要是学习一下Angular4所有花了我一天时间,写了这个刷新组件. 以项目开发当中,特别是手机移动端开发的时候,经常要用到就是上拉加载下一面,下拉刷新获取最新数据的功能. 在网也有很多 ...
- (转)Linux 系统性能分析工具图解读(一、二)
Linux 系统性能分析工具图解读(一.二) 原文:http://oilbeater.com/linux/2014/09/08/linux-performance-tools.html 最近看了 Br ...
- 最近准备把安卓和java的知识再回顾一遍,顺便会写博客上!千变万化还都是源于基础,打扎实基础
最近准备把安卓和java的知识再回顾一遍,顺便会写博客上!千变万化还都是源于基础,打扎实基础,加油吧 距离去北京还有23天
- Hashtable和HashMap的区别,Properties类的简单使用
一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...
- Find command usage in Linux with excellent examples--reference
http://www.coolcoder.in/2014/02/find-command-usage-in-linux-with.html find searches the directory tr ...
- 使用openssl在命令行加密
对于需要在应用软件中进行加密编程的开发者,通过命令行把基本的加密操作做一遍是很有意义的.openssl支持在命令行进行各种基本加密算法的操作.这些操作过程无需编程,其命令参数与程序函数调用加密的参数有 ...
- 白话SpringCloud | 第十一章:路由网关(Zuul):利用swagger2聚合API文档
前言 通过之前的两篇文章,可以简单的搭建一个路由网关了.而我们知道,现在都奉行前后端分离开发,前后端开发的沟通成本就增加了,所以一般上我们都是通过swagger进行api文档生成的.现在由于使用了统一 ...
- bzoj 5298: [Cqoi2018]交错序列
Description 我们称一个仅由0.1构成的序列为"交错序列",当且仅当序列中没有相邻的1(可以有相邻的0).例如,000,001 ,101,都是交错序列,而110则不是.对 ...
- js录制视频并保存
使用webAPI录制视频 经测试, 只在谷歌和火狐浏览器里起效. 代码: const streamVideo = document.querySelector('.stream') const pla ...