最近在产品中使用了TableTools这个工具，主要用来实现导出和复制功能。
但是在实际的运用中出现了以下相关问题
当结合jquery的tabs工具，tableTools只能在初始化的页面运行正常，一旦切换到其他Tabs里就不能正常运行了；
另外就是同一个页面里，不能在不同的div下创建一个tableTools工具；
还有就是几个datatables在一个页面里，但是每次都只显示其中一个，导致TableTools工具不能正常使用。
而且datatables在多次切换后，还会出现
另外同时初始化多个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的源码改造部分完成，下面该是前端如何应用了，请继续往瞎看(硬着头皮也要继续 (*^__^*) 嘻嘻……)
眼睛可以近视，目光不能短浅。
