Question

I'm trying to find a way to change the buttons on TableTools. I'd like to use my own customized links instead of the flash buttons. Is there a way I can do that? Any good resource teaching me how to make that modification and still able to use the functionalities, like button collection, etc.

Was it helpful?

Solution

According to the creator, the only way to get the TableTools export functionality is by using the Flash buttons.

The other threads that you found should say that currently, no, this is not an option that TableTools provides. The Flash option is used to provide cross browser / platform ability to save files entirely on the client-side - that option simply isn't available in older browsers (IE6, IE7 etc) where there is no support for the data:// protocol and local file system interaction options.

It would most certainly be possible to add this ability to TableTools, but I'm afraid I haven't yet had an opportunity to do so. It is on the road map though.

Allan

If you are interested in creating the export files server side, you may want to consider the download (GET) plug-in for TableTools.

OTHER TIPS

Yes, it is possible to override the existing buttons eg PDF/CSV etc or to create new custom buttons that have links to a url to get or post data. Here, I'm showing 2 methods with get methods:

For More info on Get & Post methods:

Visit: Datatable tabletools GET/POST download method overrides

Code generated pdf is used because pdf output from tabletools on a table that have rows grouped by some column data is overlapped.

1st to override PDF function and

2nd to create custom button.

1. Override PDF function to fetch pdf from server code.

/*Get Method table Tools - PDF - Overriding*/

    TableTools.BUTTONS.pdf = {
        "sAction": "text",
        "sTag": "default",
        "sFieldBoundary": "",
        "sFieldSeperator": "\t",
        "sNewLine": "<br>",
        "sToolTip": "",
        "sButtonClass": "DTTT_button_text",
        "sButtonClassHover": "DTTT_button_text_hover",
        //"sButtonText": "PDF",
        "mColumns": "all",
        "bHeader": true,
        "bFooter": true,
        "sDiv": "",
        "fnMouseover": null,
        "fnMouseout": null,
        "fnClick": function (nButton, oConfig) {
            var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
            var iframe = document.createElement('iframe');
            iframe.style.height = "0px";
            iframe.style.width = "0px";
            //iframe.src = oConfig.sUrl + "?" + $.param(oParams);
            iframe.src = oConfig.sUrl;//This is the URl you give in datatable Tabletools pdf override below
            document.body.appendChild(iframe);
        },
        "fnSelect": null,
        "fnComplete": null,
        "fnInit": null
    };

    /**/


/*Datatable initialisation*/
$(document).ready(function () {

oTable = $('#alternatecolor').dataTable({
            "bJQueryUI": true,
            "aLengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
            ],
            "sPaginationType": "full_numbers",
            "aoColumns": [
            null,
            null,
            null,
            null,
            null],
            "bLengthChange": false, "bPaginate": false,
            "sDom": '<"H"Tfr>t<"F"ip>',
            //"sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
              "csv", "xls",
              {
               /*PDF Override*/
              "sExtends": "pdf",
              "sButtonText": "PDF",
               //Custom url to fetch pdf report
              "sUrl": " report/PDFReportUsers/us/1"
          }
            ]
            }
        })
        /*Row grouping - optional*/
                .rowGrouping({ bExpandableGrouping: true,
                    bExpandSingleGroup: false,
                    iExpandGroupOffset: -1
                    //asExpandedGroups: [name]
                });

        /**/
    });  
});

2. Custom button to fetch pdf from server code.

        /*Get Method table Tools - Download custom button*/

        TableTools.BUTTONS.download= {
            "sAction": "text",
            "sTag": "default",
            "sFieldBoundary": "",
            "sFieldSeperator": "\t",
            "sNewLine": "<br>",
            "sToolTip": "",
            "sButtonClass": "DTTT_button_text",
            "sButtonClassHover": "DTTT_button_text_hover",
            //"sButtonText": "PDF",
            "mColumns": "all",
            "bHeader": true,
            "bFooter": true,
            "sDiv": "",
            "fnMouseover": null,
            "fnMouseout": null,
            "fnClick": function (nButton, oConfig) {
                var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
                var iframe = document.createElement('iframe');
                iframe.style.height = "0px";
                iframe.style.width = "0px";
                //iframe.src = oConfig.sUrl + "?" + $.param(oParams);
                iframe.src = oConfig.sUrl;
                document.body.appendChild(iframe);
            },
            "fnSelect": null,
            "fnComplete": null,
            "fnInit": null
        };

        /**/
$(document).ready(function () {

        oTable = $('#alternatecolor').dataTable({
            "bJQueryUI": true,
            "aLengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
            ],
            "sPaginationType": "full_numbers",
            "aoColumns": [
            null,
            null,
            null,
            null,
            null],
            "bLengthChange": false, "bPaginate": false,
            "sDom": '<"H"Tfr>t<"F"ip>',
            //"sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
              "csv", "xls"
                         , {
                              "sExtends": "download",
                              "sButtonText": "Download PDF",
                              "sUrl":     "admin/user/4/downloadfile"
                          }
            ]
            }
        })
        /*Row grouping - optional */
                .rowGrouping({ bExpandableGrouping: true,
                    bExpandSingleGroup: false,
                    iExpandGroupOffset: -1
                    //asExpandedGroups: [name]
                });

        /**/
    });  
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top