[Turn] The application of Tabletools in the DataTables of jquery

This article transferred from: http://147068307.iteye.com/blog/1700516

Recently, the Tabletools tool has been used in the product to implement export and replication functions.

However, the following problems have arisen in the practical application.

When combined with jquery's tabs tool, Tabletools can only run properly on the initialized page, and will not function once the switch to the other tabs.

Another is the same page, you can not create a tabletools tool under different div;

There are a few datatables in a page, but each time only one display, resulting in the Tabletools tool does not work properly.

and DataTables after multiple switching, there will also be reported __flash__addcallback related errors, function __flash__addcallback (instance, name) The instance in the method is null.

In addition, multiple DataTables components are initialized simultaneously, the current page displays only one, and the other needs to be displayed by toggling (tabs), but the header is indented.

Tabletools default is foreground export oh copy, how to implement background export (and support background filtering).



1, DataTables table head shortening problem, first of all, this div must be displayed, can not let this div in a display:none state, if so, DataTables update data after the display will appear the table header shortened.

2, more than one tables on the same page, must be in a large container (simply say under a div), or tabletools export can not be used.

3, about Tablestools background paging processing, here gives the source code (actual need to debug):

1. Increase the 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
},
This is done by analyzing the Tabletools export data format after the modification, just add the Ajax after the return of data, the other exported headers, footer are consistent on the page.

@@ 另外 Java-side settings json name should be jsondata (must be consistent)

Fngetextxlsdata method

/** @method Fngetextxlsdata
* @param oconfig
* @returns
*/
"Fngetextxlsdata": function (oconfig, flag)
{
/* In the future this could is used to get the data from a plain HTML source as well as DataTables */
if (THIS.S.DT)
{
Return This._fngetextxlsdata (oconfig, flag);
}
},
_fngetextxlsdata method

/**
* @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-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;
},
The above method simply borrows the header and footer in the way the plugin was originally implemented.

To here should say tabletools the source of the transformation of the partial completion, the following is how to apply the front end, please continue to look at the blind (bite the bullet also to continue (*^__^*) hehe ...)

"Page Application Instance"

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": "Copy"
},
{
"Sextends": "XLS",
"Sbuttontext": "Export Excel"
},
{
"Sextends": "Ext-xls",
"Sajaxurl": "Yx/loginuser!ext.action",
"Sparameters": Parameters,
"Skeys": Vkeys,
"Sbuttontext": "Export File"
}
]
},
' 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-side implementations:
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;
}

Above the red section, it should be explained that:

Sajaxurl: Requested URL address

Sparameters: Requested parameter

Skeys: The key value of the corresponding JSON data must be consistent with the Page table column (qty)

Sextends: Here is an Abutton entry for the extended Tabletools



4, when using a DataTable combined with Tabletools, it is best that the object can be reused, instead of creating new each time, so as to avoid the occurrence of flash crashes, the other way is to create multiple times, but to clean up, but also to avoid the flash crash situation. The cleanup code is as follows:

if ($ (' #ZeroClipboardMovie_ ' +count)!=null) {
$ (' #ZeroClipboardMovie_ ' +count). Remove ();
}

count++;

Count is automatically added 1 each time it is created, so that the corresponding object will be found.



5, when using tabs with a DataTable, there must be a main frame, simply said tabs there are four options, each option corresponds to a page. A total of 5 pages, one of which is used to contain the other 4 pages, including loading other JS, CSS and so on (perhaps not very clear, the expression is not accurate, hehe).

[Turn] The application of Tabletools in the DataTables of jquery