[转]关于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等(也许说的不是很明白,表达不够准确吧,呵呵)。

时间: 2024-11-09 02:55:25

[转]关于Jquery的DataTables里TableTools的应用的相关文章

用jQuery在IFRAME里取得父窗口的某个元素的值

收集网上的一些示例: 用jQuery在IFRAME里取得父窗口的某个元素的值 只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true"); 2.在IFRAME中操作 选中父窗口中的所有单选钮 $(window

解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的实用性.但是再好的程序也会有瑕疵,项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引.会多次提交刷新数据(有多少列会提交刷新多少次). 为解决这个问题尝试了很多种

jQuery在iframe里取得父窗口的某个元素的值

提供一款jQuery在iframe里取得父窗口的某个元素的值实现,这个iframe用js也差不多,有需要的朋友可以参考一下. 1.在父窗口中获取指定iframe(testiframe) id 为 testid 的class $(window.frames["testiframe"].document).find("#testid").attr('class'); 2.在IFRAME中获取父窗口中id为testid的class $(window.parent.docu

datatables里面的search怎么去掉?

今天使用datatables插件的时候,由于需求是把自带的search去掉,并且给输入框加上placeholder="Search",使其看起来更简洁美观,于是乎简单粗暴的把代码改了,即 $("#dataList_filter").find("label").html('<input type="search" class="" placeholder="search" aria-

JQuery之DataTables强大的表格解决方案

好久没有写过前端的东西了,好多东西真是遗忘的太快了,重新捡起jquery,开始写公司的后台...在jquery中更好的处理表格这个东西,还是很蛋疼的,如果要是好看点还要在使用bootstrap来做.看到园子里有人研究过,哪来学一学: 1.DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configu

谈谈jQuery和js里有关位置和宽高的方法

总结一下jQuery.原生js设置和获取位置.宽高的方法. 一.jQuery关于元素位置的方法 position() 方法:只能获取,不能设置. 可获取元素相对于其第一个position值不为static的祖先元素的偏移量,如果没有,则是相对于文档的偏移量:返回一个对象,包括两个属性:left,top; 属性值无单位,number类型.具体用法: $(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量 offset(

JQuery插件datatables相关api

学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码 <style type="text/css" title="currentStyle"> @import "css/demo_

jquery之DataTables的使用

document jquery function lsquo 强大的表格解决方案,有多强大,一起来看下吧: 1.DataTables的默认配置 $(document).ready(function() {$('#example').dataTable();} ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能&

jQuery的dataTables插件实现中文排序

最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下,与君共享. 1 <script type="text/javascript"> 2 3 // oSort是排序类型数组, 'chinese-asc'是自己定义的类型的排序(*-asc || *-desc)名称 4 // 插件应该会根据表格中的内容的类型(string, numb