Frage an javascript, tabletools, jquery, jquery-datatables – So verwenden Sie einen Link in TableTools anstelle von Flash-Schaltflächen

6

Ich versuche, eine Möglichkeit zu finden, die Schaltflächen in TableTools zu ändern. Ich möchte meine eigenen benutzerdefinierten Links anstelle der Flash-Schaltflächen verwenden. Gibt es eine Möglichkeit, das zu tun? Jede gute Ressource, die mir beibringt, wie man diese Änderung vornimmt und trotzdem die Funktionen wie die Tastensammlung usw. nutzt.

Deine Antwort

2   die antwort
0

es ist möglich, die vorhandenen Schaltflächen (z. B. PDF / CSV usw.) zu überschreiben oder neue benutzerdefinierte Schaltflächen zu erstellen, die Links zu einer URL zum Abrufen oder Veröffentlichen von Daten enthalten. Hier zeige ich 2 Methoden mit get-Methoden:

Weitere Informationen zu Get & Post-Methoden:

Besuch:Datatable tabletools GET / POST-Download-Methode überschreibt

Mit Code generierte PDF-Dateien werden verwendet, da die PDF-Ausgabe von Tabletools in einer Tabelle, deren Zeilen nach Spaltendaten gruppiert sind, überlappt.

1. PDF-Funktion überschreiben und

2. Benutzerdefinierte Schaltfläche erstellen.

1. Überschreiben Sie die PDF-Funktion, um PDF-Dateien vom Servercode abzurufen.

<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]
                });

        /**/
    });  
});
</code>

2. Benutzerdefinierte Schaltfläche zum Abrufen von PDF-Dateien vom Servercode.

<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]
                });

        /**/
    });  
</code>
Ob Sie irgendwelche Experimente dazu gemacht haben Suganthan Madhavan Pillai
@Suganthan, ich habe dies an vielen Stellen im Projekt verwendet. T Gupta
@Suganthan, ich habe eine URL verwendet, die eine PDF-Datei als Stream an den Browser des Benutzers zurückgibt. So geben Sie die URL des PDF-Generators an: "sUrl": "admin / user / 4 / downloadfile" DataTable lädt die URL wie folgt: iframe.src = oConfig.sUrl; T Gupta
Dieser Code ist derselbe wie auf der dataTable-Website, ok, in Ordnung ... eine Hilfe, bei der Sie hier eine PDF-Datei erstellen, scheint, dass Sie denselben iframe erstellen Suganthan Madhavan Pillai
4

Laut dem SchöpferDie einzige Möglichkeit, die TableTools-Exportfunktion zu erhalten, ist die Verwendung der Flash-Schaltflächen.

Die anderen Threads, die Sie gefunden haben, sollten besagen, dass dies derzeit keine Option von TableTools ist. Die Flash-Option wird verwendet, um eine browser- / plattformübergreifende Möglichkeit zum vollständigen Speichern von Dateien auf der Clientseite bereitzustellen. Diese Option ist in älteren Browsern (IE6, IE7 usw.), in denen das data: // -Protokoll nicht unterstützt wird, einfach nicht verfügbar und Optionen für die Interaktion mit dem lokalen Dateisystem.

Es wäre mit Sicherheit möglich, diese Funktion zu TableTools hinzuzufügen, aber ich fürchte, ich hatte noch keine Gelegenheit dazu. Es ist jedoch auf der Straßenkarte.

Allan

Wenn Sie daran interessiert sind, die Serverseite für Exportdateien zu erstellen, sollten Sie dies in Betracht ziehendas Download (GET) -Plug-In für TableTools.

Verwandte Fragen