juery datatables 实例分析

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
下面这个例子用于bootstrap上，所以在jsp上需要导入css和相应的JS,用的例子的datatables的版本是1.10.4

<link href="css/plugins/dataTables/dataTables.bootstrap.css"rel= "stylesheet">
<link href="css/plugins/dataTables/dataTables.responsive.css"rel= "stylesheet">
<link href="css/plugins/dataTables/dataTables.tableTools.min.css"rel= "stylesheet">
<!-- Data Tables -->
<script src="js/plugins/dataTables/jquery.dataTables.js" ></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js" ></script>
<script src="js/plugins/dataTables/dataTables.responsive.js" ></script>
<script src="js/plugins/dataTables/dataTables.tableTools.min.js" ></script>

表格的div块

<div class="ibox-content"><table id="deviceEditable"class="table table-striped table-bordered table-hover"><thead><tr><th>编号</th><th>编号</th><th>卡号</th><th>到期日期</th><th>xxx</th><th>分配日期</th><th>状态</th><th>是否分配</th><th style="background-color: white;">操作</th></tr></thead><tbody></tbody></table>
</div>

表格初始化

//表格初始化
var oTable = $('#deviceEditable').dataTable({//表格行数选择框内数目，第一个数组代表value，第二个数组代表key"lengthMenu": [[10, 15, 20, 50, -1],[10, 15, 20, 50, "All"]],//不开启自动宽度，用bootstrap的自适应去调整，不知道为什么要关掉这个，整个表格才能自适应，可能与bootstrap有冲突？autoWidth:false,"paginate": true, //翻页功能"paginate":true,//是否使用分页 "sort": false, //排序功能"jQueryUI": false,"info": true,//页脚信息//默认的显示行数"displayLength": 10,//自定义语言提示"language": {"lengthMenu": "每页 _MENU_ 条记录","paginate": {"previous": "上一页","next": "下一页"},"info" : "从 _START_ 到  _END_ 条，总记录为 _TOTAL_ 条",   "infoEmpty" : "记录数为0",},//每一行的默认值,可指定宽度数据，默认文本等"columnDefs": [{"data": null,'sortable': false,"defaultContent": "<center>---<center>","targets": [8]}           ],//每一行对应返回过来的json数据中的变量名"columns": [{ "data": "a" },{ "data": "b" },{ "data": "c" },{ "data": "d" },{ "data": "e" },{ "data": "f" },{ "data": "g" },{ "data": "h" },],//是否过滤"filter" : false,//是否显示进度"processing": false,//选择服务器端处理数据"serverSide": true,//数据源"ajaxSource": ctx + "/device/query",//请求类型"serverMethod": "post",//默认的回调函数，其实就是如何渲染行内数据，nRow代表遍历的每一行，aData是服务器返回的json对象，displayIndex代表下标"fnRowCallback" : function(nRow, aData, displayIndex) {nRow.children[0].id = aData.id;nRow.children[1].id = aData.orgId;var h = "";var operation = ""var g = "";if(aData.e == undefined){$('td:eq(4)', nRow).html("");}if(0 == aData.h && 2 != aData.g){h = "未分配";operation ='<a title="分配" class="distribution fa fa-user fa-lg pull-left" href="javascript:;">\</a>&nbsp;<a class="repair fa fa-wrench fa-lg pull-left" title="报修" href="javascript:;"></a>';}else if(1 == aData.h && 2 != aData.g){h = "已分配";operation ='<a class="pullback fa fa-retweet fa-lg pull-left" title="归还" href="javascript:;"></a>\&nbsp;<a class="repair fa fa-wrench fa-lg pull-left" title="报修" href="javascript:;"></a>'}if(0 == aData.g){g = "仓库中";}else if(1 == aData.g){g = "已领取";}else if(2 == aData.g){g = "报修中";}$('td:eq(6)', nRow).html(g);$('td:eq(7)', nRow).html(h);$('td:eq(8)', nRow).html(operation);return nRow;},//去服务器去数据前的最后一次处理，可以认为是像服务器端发送请求的数据"fnServerData" : function(ajaxSource, dataSet, fnCallback) {var json = "";var s;//分页的大小for (var i = 0; i < dataSet.length; i++) {s = dataSet[i];if (s.name == 'sEcho') {json = json + '"echo":' + s.value;} else if (s.name == 'iDisplayStart') {json = json + ',"page":' + s.value;} else if (s.name == 'iDisplayLength') {json = json + ',"pageSize":' + s.value;}}var a = $("#a").attr("value");//查询表格的参数json序列化var form = $("form#queryForm").serializeJSON();var js = form.replace('}', ',');json = js + json +',"a":"'+a+ '"}';//我用拼json的方式，在服务器端用fastjson做处理能接收到$.ajax({"contentType":"application/json; charset=UTF-8","dataType" : 'json',"type" : "POST","url" : ajaxSource,"data" : json,"success" : fnCallback//调用默认的毁掉函数});},
});$('#queryBtn').click(function(){//清除表格重新绘制，等于重新从服务器端拿数据，oTable.fnClearTable();
});
//删除当前行
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
//重画表格，参数为false只重画当前页面，否则为全部
oTable.fnDraw(false);

服务器端返回的数据(示例)：

{"iTotalDisplayRecords": 10,//显示的记录数"iTotalRecords": 10,//总记录数//数据"aaData": [{"a": 0,"b": "2015-07-29 12:51:05","c": "JUDGE","d": "2015-08-21 15:03:26","e": "","r": "","g": "2015-08-31 00:00:00","a": "J001","1": "1","w": "FDSD-UYTH-JHHF-HKKH","f": "Default","r": "Default001","q": "2222","n": "1","m": "234","z": "1","x": "1311131313","v": 1},...]
}

下面为展示效果。更多方法参照datatables实例http://dt.thxopen.com/example/

如果将表格嵌套在弹出框modal,或其他在当前页面的控件中时，可能会出现多次初始化的情况，这样表格就会报错误，数据都不会刷新，在此我使用了一个很挫裂的方法就是每次弹出弹出框时判断该表格是否被初始化：

//防止多次初始化
var oTableB = null;
var oTableCharge = null;
var oTableConmission = null;
$.ajax({"contentType":"application/json; charset=UTF-8",type:"post",url: ctx + "/a/v",data: json,dataType:"json",success: function(msg){if (oTableB != null) {//为了避免多次初始化datatable()oTableB = null;//fvTable.fnAdjustColumnSizing(); //重新判断列宽度，实际执行并没有效果}if (oTableCharge != null) {//为了避免多次初始化datatable()oTableCharge = null;//fvTable.fnAdjustColumnSizing(); //重新判断列宽度，实际执行并没有效果}if (oTableConmission != null) {//为了避免多次初始化datatable()oTableConmission = null;//fvTable.fnAdjustColumnSizing(); //重新判断列宽度，实际执行并没有效果}oTableB = $('#ordersVisitEditable1').dataTable({"lengthChange" : false,"autoWidth":false,"displayLength": 0,"paginate": false, //翻页功能"paginate":false,//是否使用分页"sort": false, //排序功能"jQueryUI": false,"info": false,//页脚信息"columnDefs": [{ "width": "30%", "targets": 0 },{ "width": "40%", "targets": 1 },{ "width": "30%", "targets": 2 }],"columns": [{ "data": "employeeName" },{ "data": "content" },{ "data": "visitTime" }],"destory":true,"filter" : false,"processing": false,"serverSide": true,"ajaxSource": ctx + "/orders/contacts","serverMethod": "post","fnRowCallback" : function(nRow, aData, displayIndex) {return nRow;},"fnServerData" : function(ajaxSource, dataSet, fnCallback) {var json = "";var s;for (var i = 0; i < dataSet.length; i++) {s = dataSet[i];if (s.name == 'sEcho') {json = json + '"echo":' + s.value;} else if (s.name == 'iDisplayStart') {json = json + ',"page":' + s.value;} else if (s.name == 'iDisplayLength') {json = json + ',"pageSize":' + s.value;}}var form = $("form#queryadaForm").serializeJSON();var js = form.replace('}', '');json = js + json +',"id":'+id+ "}";$.ajax({"contentType":"application/json; charset=UTF-8","dataType" : 'json',"type" : "POST","url" : ajaxSource,"data" : json,"success" : fnCallback});},});

juery datatables 实例分析相关推荐

gpgpu-sim卡分配程序设计实例分析
gpgpu-sim卡分配程序设计实例分析运行代码地址:https://github.com/gpgpu-sim/gpgpu-sim_distribution 一．概述此文件包含有关安装.生成和运行 ...
python多功能电子钟_python gui - PyQt4 精彩实例分析之电子钟
PyQt4 精彩实例分析之电子钟,当然在写实例之前要先安装PyQt4模块.from PyQt4.QtGui import * from PyQt4.QtCore import * import sys ...
RPC-原理及RPC实例分析
还有就是:RPC支持的BIO,NIO的理解 (1)BIO: Blocking IO;同步阻塞: (2)NIO:Non-Blocking IO, 同步非阻塞; 参考:IO多路复用,同步,异步,阻塞和非阻 ...
python asyncio教程_python中使用asyncio实现异步IO实例分析
1.说明 Python实现异步IO非常简单,asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接 ...
马歇尔·赫伯特：人工智能的前沿技术与实例分析
来源:中国人工智能学会 2017年12月11日,国际知名机器人专家.美国卡耐基梅隆大学机器人研究所所长马歇尔·赫伯特(Martial Hebert)教授和首席科学家大卫·伯恩(David Bourne ...
python怎么处理数据_python中scrapy处理项目数据的实例分析
在我们处理完数据后,习惯把它放在原有的位置,但是这样也会出现一定的隐患.如果因为新数据的加入或者其他种种原因,当我们再次想要启用这个文件的时候,小伙伴们就会开始着急却怎么也翻不出来,似乎也没有其他更好 ...
Android10.0 Binder通信原理(四)-Native-C\C++实例分析
摘要:本节主要来讲解Android10.0 Binder的Native层实例流程阅读本文大约需要花费35分钟. 文章首发微信公众号:IngresGe 专注于Android系统级源码分析,Androi ...
Android Touch事件原理加实例分析
Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. ...
SSL/TLS 协议简介与实例分析
作者:drinkey 以前读RFC时总结的一篇文章,主要介绍了SSL/TLS协议的相关知识,包括协议本身以及简单的密码学概念,以及用实例解析了HTTP over SSL的协商过程,在最后简要列出了SS ...