JQuery DataTable的配置项及事件

时间:2023-01-06 08:04:20

当我们需要在加载或者显示表格的时候,改变jquery datatable 的数据,或增加一些html标签处理。

可以通过Jquery DataTable的回调函数处理。

实例代码:

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;
}
});
JQuery DataTable的配置项及事件

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

JQuery DataTable的配置项及事件
$(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;
}
} );
} );
JQuery DataTable的配置项及事件

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

JQuery DataTable的配置项及事件
$(document).ready( function() {
$('#example').dataTable( {
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
// 为a的话字体加粗
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
JQuery DataTable的配置项及事件
JQuery DataTable的配置项及事件
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
alert( 'DataTables 重绘了' );
}
} );
} );
JQuery DataTable的配置项及事件

fnDrawCallback:draw画 ,这个应该是重绘的回调函数

fnInitComplete:datatables初始化完毕后会调用这个方法

JQuery DataTable的配置项及事件
$(document).ready( function() {
$('#example').dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables 初始化完毕' );
}
} );
} )
JQuery DataTable的配置项及事件
JQuery DataTable的配置项及事件
$(document).ready( function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// 所有的a都加粗
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
JQuery DataTable的配置项及事件

fnRowCallback:行的回调函数(所有行得回调函数)

fnServerData:这个是结合服务器模式的回调函数,用来处理服务器返回过来的数据

JQuery DataTable的配置项及事件
// 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的配置项及事件的更多相关文章

  1. 使用jquery&period;datatable&period;js注意事项

    本文链接:https://blog.csdn.net/ylg01/article/details/76463908写在最前面的话,如果不是维护老项目或者在老项目上二次开发尽量不要用这个表格插件 为什么 ...

  2. jquery dataTable汉化(插件形式)

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  3. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  5. jQuery之Ajax--全局Ajax事件处理器

    1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...

  6. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery如何给body绑定事件?

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  8. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  9. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

随机推荐

  1. TCP Fast Open

    We know that Web services use the TCP protocol at the transport layer. Standard TCP protocol to thre ...

  2. 二分查找算法java实现

    今天看了一下JDK里面的二分法是实现,觉得有点小问题.二分法的实现有多种今天就给大家分享两种.一种是递归方式的,一种是非递归方式的.先来看看一些基础的东西. 1.算法概念. 二分查找算法也称为折半搜索 ...

  3. spring heibernate 调用存储过程

    一:参考网址 http://sunbin123.iteye.com/blog/1007556 二:示例 @Autowired @Qualifier("jdbcTemplate") ...

  4. firefox如何restart重启

    1.开发者工具栏可以对firefox进行重启,不是关闭firefox又打开那种重启

  5. mysql性能优化配置总结

    看了一些优化mysql运维的一些书籍,在此记录总结下:进入mysql客户端输入以下sql:1.连接设置 show variables like '%max_connection%'; show sta ...

  6. java web开发中遇到的问题及解决方案(个人学习日志,持续更新)

    转:http://blog.csdn.net/ducexu/article/details/7529613 2012.05.02   星期三 1.问题:导入的新工程,名字上出现感叹号. 原因:工程的j ...

  7. (转)java程序员进入名企需要掌握哪些,立一个flag

    想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,在面试之前到底需要准备哪些东西呢?面试时面试官想了解你的什么专业技能,以下都是一个合格Java软件工程师所要具备的. 一.专业技能 熟练的 ...

  8. java项目使用mvn打包时,出现数据库连接错误

    原因: maven在install的时候会默认去执行test包下的test示例,导致打包失败,只需要把测试注释掉就可以了包括类上的注解,或者在install的时候跳过测试,install -Dmave ...

  9. 数组Array&period;sort&lpar;&rpar;排序的方法

    数组sort排序 sort比较次数,sort用法,sort常用 描述 方法sort()将在原数组上对数组元素进行排序,即排序时不创建新的数组副本.如果调用方法sort()时没有使用参数,将按字母顺序( ...

  10. python测试开发django-42&period;auth模块登陆认证

    前言 在开发一个网站时,经常会用到用户的注册和登陆相关的账号管理功能,auth模块是Django提供的标准权限管理系统,可以提供用户身份认证, 用户组和权限管理. 像用户注册.用户登录.用户认证.注销 ...