[转]关于Jquery的DataTables里TableTools的应用
本文转自:http://147068307.iteye.com/blog/1700516
最近在产品中使用了TableTools这个工具,主要用来实现导出和复制功能。
但是在实际的运用中出现了以下相关问题
当结合jquery的tabs工具,tableTools只能在初始化的页面运行正常,一旦切换到其他Tabs里就不能正常运行了;
另外就是同一个页面里,不能在不同的div下创建一个tableTools工具;
还有就是几个datatables在一个页面里,但是每次都只显示其中一个,导致TableTools工具不能正常使用。
而且datatables在多次切换后,还会出现有时也会报__flash__addCallback相关的错误,function __flash__addCallback(instance, name) 方法里的instance为null。
另外同时初始化多个datatables组件,当前页面只显示一个,另外一个需要通过切换的方式进行显示(tabs),但表头会缩进。
TableTools默认都是前台导出哦复制,如何实现后台导出(并支持后台过滤)。
1、datatables表头缩短问题,首先是这个div必须显示出来,不能让此div在一个display:none的状态下,如果这样,datatables更新数据后显示就会出现表头缩短。
2、多个tables在同一页面下,必须在一个大的容器里面(简单的说就是在一个div下面),不然tableTools导出不能使用。
3、关于tablesTools后台分页处理,这里给出源码(实际情况需要调试):
1.增加aButton项
"ext-xls": { "sAction": "flash_save",
"sCharSet": "utf16le",
"bBomInc": true,
"sFileName": "*.csv",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "auto",
"sTitle": "",
"sToolTip": "",
"sButtonClass": "DTTT_button_xls",
"sButtonClassHover": "DTTT_button_xls_hover",
"sButtonText": "Excel",
"sAjaxUrl": "/xhr.php",
"sParameters":"",
"sKeys":"",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"bSelectedOnly": false,
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig , flash) {
var sData = this.fnGetExtXlsData(oConfig, "header");
var vkeys = oConfig.sKeys;
$.ajax( {
"url": oConfig.sAjaxUrl,
"data": oConfig.sParameters,
"async": false,
"success": function(data) {
$.each(data.jsondata, function(k, n){
sData += (k+1) + "\t";
for(j =0; j<vkeys.length ; j ++) {
sData += " " + eval("n[\"" + vkeys[j] + "\"]") + "\t";
}
sData += "\r\n";
});
},
"dataType": "json",
"type": "POST"
} );
sData += this.fnGetExtXlsData(oConfig, "footer");
this.fnSetText(flash, sData);
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null,
"fnAjaxComplete": null
},
此处是通过分析tabletools导出数据格式后进行修改的,只是加上了ajax后返回数据的填充,其他导出的header、footer都是于页面上保持一致。
@@另外java端设置json的名字应该为jsondata(必须一致)
fnGetExtXlsData方法
/** @method fnGetExtXlsData
* @param oConfig
* @returns
*/
"fnGetExtXlsData": function ( oConfig , flag)
{
/* In future this could be used to get data from a plain HTML source as well as DataTables */
if ( this.s.dt )
{
return this._fnGetExtXlsData( oConfig , flag);
}
},
_fnGetExtXlsData方法
/**
* @param oConfig
* @param data
* @returns {String}
*/
"_fnGetExtXlsData": function ( oConfig , flag)
{
var i, iLen, j, jLen;
var sData = '', sLoopData = '';
var dt = this.s.dt;
var regex = new RegExp(oConfig.sFieldBoundary, "g"); /* Do it here for speed */
var aColumnsInc = this._fnColumnTargets( oConfig.mColumns );
var sNewline = this._fnNewline( oConfig );
/*
* Header
*/
if ( oConfig.bHeader && flag == "header")
{
for ( i=0, iLen=dt.aoColumns.length ; i<iLen ; i++ )
{
if ( aColumnsInc[i] )
{
sLoopData = dt.aoColumns[i].sTitle.replace(/\n/g," ").replace( /<.*?>/g, "" );
sLoopData = this._fnHtmlDecode( sLoopData );
sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
oConfig.sFieldSeperator;
}
}
sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 );
sData += sNewline;
}
/*
* Footer
*/
if ( oConfig.bFooter && flag == "footer")
{
for ( i=0, iLen=dt.aoColumns.length ; i<iLen ; i++ )
{
if ( aColumnsInc[i] && dt.aoColumns[i].nTf !== null )
{
sLoopData = dt.aoColumns[i].nTf.innerHTML.replace(/\n/g," ").replace( /<.*?>/g, "" );
sLoopData = this._fnHtmlDecode( sLoopData );
sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
oConfig.sFieldSeperator;
}
}
sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 );
}
/* No pointers here - this is a string copy */
//_sLastData = sData;
return sData;
},
以上该方法只是借用插件原先实现的方式设置header与footer。
到此处应该说tabletools的源码改造部分完成,下面该是前端如何应用了,请继续往瞎看(硬着头皮也要继续 (*^__^*) 嘻嘻……)
【页面应用实例】
function fillData2Tables(arr) {
if (dateTable != null) {dateTable.fnClearTable();}
var queryType = getQuertTypeValue();
var parameters = {"queryType":queryType,
"startDate":$("#startDate").val(),
"endDate":$("#endDate").val(),
"singleDate":$("#singleDate").val(),
"userid":$("#userid").val(),
"userlevel":$("#userlevel").val()};
var vKeys = ["nick", "logintimes", "userid", "usertype", "userlevel", "shopid", "shoptitle", "shopcname", "ddate"];
dateTable = $('#loginUser').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../3rd/datatables/media/TableTools/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "复制"
},
{
"sExtends": "xls",
"sButtonText": "导出Excel"
},
{
"sExtends": "ext-xls",
"sAjaxUrl": "yx/loginUser!ext.action",
"sParameters": parameters,
"sKeys": vKeys,
"sButtonText": "导出文件"
}
]
},
'sScrollX': '100%',
'sScrollXInner': '180%',
"sPaginationType": "full_numbers",
'bScrollCollapse': true,
'fnDrawCallback': function ( oSettings ) {
if ( oSettings.bSorted || oSettings.bFiltered ) {
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ) {
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
'aoColumnDefs': [
{ 'bSortable': false, 'sClass': 'index', 'aTargets': [ 0 ] }
],
'aaSorting': [[1,'desc']]
} );
dateTable.fnAddData(arr);
}
java端实现:
public String ext() throws Exception {
QueryCondition qc = wrapQueryCondition();
qc.setIsDownload(AppCons.ISDOWNLOAD);
List<DayLogin> dayLogins = fxbReportService.getDayLoginsByCondition(qc);
Map<String,Object> map = new HashMap<String, Object>();
map.put("jsondata", dayLogins);
Struts2Utils.renderJson(JSONObject.fromObject(map).toString());
return null;
}
以上红色部分,需要说明的是:
sAjaxUrl:请求的url地址
sParameters:请求的参数
sKeys:对应的json数据的key值,必须与页面table列一致(数量)
sExtends:此处是扩展tabletools的一个aButton项
4、在使用datatable结合tableTools时,最好该对象能够重用,而不是每次都创建新的,这样可以避免出现flash崩溃的情况,另一种方式就是多次创建也可以,不过要进行清除处理,也能避免flash崩溃情况。清理代码如下:
if($('#ZeroClipboardMovie_'+count)!=null){
$('#ZeroClipboardMovie_'+count).remove();
}
count++;
count是每次创建时,都会自动加1,这样才能匹配找到对应的对象。
5、当使用tabs结合datatable时,必须有一个主框架,简单说就是tabs里有四个选项,每个选项对应一个页面。总共就需要5个页面,其中一个页面就是用来包含其他4个页面,包括加载其他的js、css等(也许说的不是很明白,表达不够准确吧,呵呵)。
[转]关于Jquery的DataTables里TableTools的应用的更多相关文章
- jQuery的DataTables中的TableTools的基本使用
DataTables的TableTools插件提供复制,导出excel.pdf,打印等功能. DataTables官网:http://datatables.net TableTools示例:http: ...
- jquery面试题里 缓存问题如何解决?
jquery面试题里 缓存问题如何解决? 如果直接用jQuery里的$.ajax()方法的话,去除缓存很简单,只需要配置一下缓存属性cache为false,但如果想要简单写法getJSON(),去除缓 ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- 用jQuery在IFRAME里取得父窗口的某个元素的值
收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window. ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- jQuery在iframe里取得父窗口的某个元素的值
提供一款jQuery在iframe里取得父窗口的某个元素的值实现,这个iframe用js也差不多,有需要的朋友可以参考一下. 1.在父窗口中获取指定iframe(testiframe) id 为 te ...
- jquery之DataTables的使用
jquery之DataTables的使用 document jquery function lsquo 强大的表格解决方案,有多强大,一起来看下吧: 1.DataTables的默认配置 $(do ...
- jQuery file upload里面的_create的调用和_initEventHandlers的调用
首先是jquery.ui.widget.js中_createWidget方法内部调用 this._create(); this._trigger( "create", null, ...
- datatables里面的search怎么去掉?
今天使用datatables插件的时候,由于需求是把自带的search去掉,并且给输入框加上placeholder="Search",使其看起来更简洁美观,于是乎简单粗暴的把代码改 ...
随机推荐
- 转换流 Properties集合 序列化 工具
今日内容介绍1.转换流2.缓冲流3.Properties集合4.序列化流与反序列化流5.commons-IO============================================== ...
- Android简单的monkey测试
Android中的monkey测试是比较常用的工具了,设定好monkey之后,让手机跑一晚上,第二天分析日志,这样能更加有效率的工作. monkey测试的工具比较多,基本的方法都差不多. 抓取日志: ...
- winform GDI基础(一)
1获取画布 (1)从PaintEventArgs类中获取画布 private void Form1_Paint(object sender, PaintEventArgs e) { Graphics ...
- C#封装的VSTO Excel操作类
自己在用的Excel操作类,因为经常在工作中要操作Excel文件,可是使用vba实现起来实在是不方便,而且编写也很困难,拼接一个字符串都看的眼花. 这个时候C#出现了,发现使用C#来操作Excel非常 ...
- c# sql省市联动
C# sql省市联动 USE [Book] GO ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ...
- 「JOI 2017 Final」JOIOI 王国
「JOI 2017 Final」JOIOI 王国 题目描述 题目译自 JOI 2017 Final T3「 JOIOI 王国 / The Kingdom of JOIOI」 JOIOI 王国是一个 H ...
- eclipse jdk安装
在Ubuntu16.04.4安装jdk 转载自:http://www.cnblogs.com/zyrblog/p/8510132.html 一.在Ubuntu16.04.4上安装jdk 1.下载jd ...
- java泛型与object的比较
在Java SE 1.5之前,没有泛型的情况的下,通过对类型Object的引用来实现参数的“任意化”,“任意化”带来的缺点是要做显式的强制类型转换,而这种转换是要求开发者对实际参数类型可以预知的情况下 ...
- 自定义非等高 Cell
1.自定义非等高 Cell介绍 1.1 代码自定义(frame) 新建一个继承自 UITableViewCell 的类. 重写 initWithStyle:reuseIdentifier: 方法. 添 ...
- 实现简易Web服务器(c语言)
任务: (1)实现服务器与客户端间的通信. (2)可以实现HTTP请求中的GET方法. (3)提供静态网页浏览功能,如可浏览:HTML页面,无格式文本,常见图像格式等. (4)提供可以传递参数的动态网 ...