DataTables

k3nguruh

k3nguruh

Erfahrenes Mitglied
Hallo,

ich versuche mich gerade mit dem JQuery Plugin "DataTables" und stoße da auf ein Problem.
Hier erstmal was funktioniert (in sehr gekürzter Form):
Javascript: 
var table = $('#table').dataTable({
    buttons: [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns:   ':gt(0)'
        },
    ]
});
Da ich die Button(s) aber mehrmals verwenden möchte, habe ich mir gedacht, dass ich dieses auslagere und sie als Default setze
Javascript: 
$.extend(true, $.fn.dataTable.defaults, {
    buttons: [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns:   ':gt(0)'
        },
    ]
});

var table = $('#table').dataTable();
Was jetzt auch noch funktioniert.

OK, da aber nicht in allen Tabellen die "columns: ':gt(0)'" vorkommt, mal gar nichts, oder mal columns: ':gt(1)' etc. versuchte ich jetzt folgendes
Javascript: 
$.extend(true, $.fn.dataTable.defaults, {
    buttons: [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            //columns:   ':gt(0)' // <-- Wird nicht immer benötigt, bzw. kann auch mal ':gt(1)' etc. sein
        },
    ]
});

$.fn.dataTable.ext.buttons.colvis = {
    columns: ':gt(0)'
};

var table = $('#table').dataTable();
und das funktioniert jetzt nicht mehr. Es wird mir zwar noch der Button wie er sein soll angezeigt, aber er ist jetzt kein "Dropdown" mehr, wo man die einzelnen Splaten auswählen kann.

Man könnte jetzt zwar die Button jedesmal neu vergeben (wie im 1. Bsp.), aber das wäre massig an Code, der sich nur mit kleinen Änderungen jedesmal wiederholen würde und ich glaube nicht, dass das im Sinne des Erfinders wäre.

Vll verstehe ich das ganze aber auch nur falsch.

Ich hoffe das es einigermassen verständlich rübergekommen ist und mir jemand helfen kann.
 
Zuletzt bearbeitet:
Mit den Innereien von Datatables und der Erweiterung der Defaults habe ich mich noch nicht beschäftigt, aber eine ganz andere Lösung liegt nahe: Die verschiedenen Varianten vorab definieren (wobei ich davon ausgehe, dass deren Anzahl gering ist) und dann bei der Init. verwenden:
Code: 
const buttons1 = [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns:   ':gt(0)'
        },
    ],
    buttons2 = [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns:   ':gt(1)'
        },
    ];

var tableA = $('#table').dataTable({buttons: buttons1});
var tableB = $('#table').dataTable({buttons: buttons1});
var tableC = $('#table').dataTable({buttons: buttons2});
 
Hallo,

erstmal Danke für deine Antwort.

Ich glaube aber, dass das auch etwas zu viel des Guten ist. Keine Ahnung wie viele unterschiedliche Konstellationen es später geben wird.... Ich gehe aber mal davon aus, dass es einige werden.

Hier jetzt mal nur ein Bsp. für eine Tabelle:
Javascript: 
const buttons: [
        {
            text: '<i class="fas fa-sync-alt"></i>',
            titleAttr: 'Reload',
            action: function(e, dt, node, config) {
                dt.ajax.reload();
            }
        },
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns:   ':gt(0)'
        },
        {
            extend:    'copy',
            text:      '<i class="fas fa-copy"></i>',
            titleAttr: 'Kopieren',
            exportOptions: {
                columns: ':visible:not(:first-child)',
            }
        },
        {
            extend:    'excel',
            text:      '<i class="fas fa-file-excel"></i>',
            titleAttr: 'Excel',
            exportOptions: {
                columns: ':visible:not(:first-child)',
            }
        },
        {
            extend:    'csv',
            text:      '<i class="fas fa-file-csv"></i>',
            titleAttr: 'CSV',
            exportOptions: {
                columns: ':visible:not(:first-child)',
            }
        },
        {
            extend:    'pdf',
            text:      '<i class="fas fa-file-pdf"></i>',
            titleAttr: 'PDF',
            exportOptions: {
                columns: ':visible:not(:first-child)',
            },
        },
        {
            extend:    'print',
            text:      '<i class="fas fa-print"></i>',
            titleAttr: 'Drucken',
            exportOptions: {
                columns: ':visible:not(:first-child)',
            }
        }
    ];

unterschiedlich wird im Endeffekt immer nur "columns: ..." sein.
 
Dann wäre noch die Möglichkeit, so wie bei deinem Ansatz mit den Defaults die gemeinsamen Optionen nur einmal zu definieren und bei Bedarf die variablen hinzuzufügen:
Code: 
let buttons = [
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            //columns:   ':gt(0)'
        },
    ];

buttons[0].columns = ':gt(0)';
var tableA = $('#table').dataTable({buttons: buttons};
var tableB = $('#table').dataTable({buttons: buttons});
buttons[0].columns = ':gt(1)';
var tableC = $('#table').dataTable({buttons: buttons});
 
Oder mit einer Funktion:
Code: 
function getButtonsOpts(val1, val2) {
    return [
        {
            text: '<i class="fas fa-sync-alt"></i>',
            titleAttr: 'Reload',
            action: function(e, dt, node, config) {
                dt.ajax.reload();
            }
        },
        {
            extend:    'colvis',
            text:      '<i class="fas fa-table"></i>',
            titleAttr: 'Spalten (an/aus)',
            columns: val2
        },
        {
            extend:    'copy',
            text:      '<i class="fas fa-copy"></i>',
            titleAttr: 'Kopieren',
            exportOptions: {
                columns: val1,
            }
        },
        {
            extend:    'excel',
            text:      '<i class="fas fa-file-excel"></i>',
            titleAttr: 'Excel',
            exportOptions: {
                columns: val1,
            }
        },
        {
            extend:    'csv',
            text:      '<i class="fas fa-file-csv"></i>',
            titleAttr: 'CSV',
            exportOptions: {
                columns: val1,
            }
        },
        {
            extend:    'pdf',
            text:      '<i class="fas fa-file-pdf"></i>',
            titleAttr: 'PDF',
            exportOptions: {
                columns: val1,
            },
        },
        {
            extend:    'print',
            text:      '<i class="fas fa-print"></i>',
            titleAttr: 'Drucken',
            exportOptions: {
                columns: val1,
            }
        }
    ];
}
var tableA = $('#table').dataTable({buttons: getButtonsOpts(':visible:not(:first-child)', ':gt(0)')};
 
OOhhh mannnn......

das kommt davon, wenn man nur auf Javascript fixiert ist und CSS aus den Augen lässt.

Javascript: 
$.extend(true, $.fn.dataTable.defaults, {
        buttons: [
            {
                text: '<i class="fas fa-sync-alt"></i>',
                titleAttr: 'Reload',
                action: function(e, dt, node, config) {
                    dt.ajax.reload();
                }
            },
            {
                extend:    'colvis',
                text:      '<i class="fas fa-table"></i>',
                titleAttr: 'Spalten (an/aus)',
                columns:   ':not(.dt-hide-colvis)'
            },
            {
                extend:    'copy',
                text:      '<i class="fas fa-copy"></i>',
                titleAttr: 'Kopieren',
                exportOptions: {
                    columns: ':visible:not(.dt-hide-export)',
                }
            },
            {
                extend:    'print',
                text:      '<i class="fas fa-print"></i>',
                titleAttr: 'Drucken',
                exportOptions: {
                    columns: ':visible:not(.dt-hide-export)',
                }
            },
            {
                extend:    'collection',
                text:      '<i class="fas fa-file-download"></i>',
                titleAttr: 'Speichern',
                autoClose: true,
                buttons: [
                    {
                        extend:    'excel',
                        exportOptions: {
                            columns: ':visible:not(.dt-hide-export)',
                        }
                    },
                    {
                        extend:    'csv',
                        exportOptions: {
                            columns: ':visible:not(.dt-hide-export)',
                        }
                    },
                    {
                        extend:    'pdf',
                        exportOptions: {
                            columns: ':visible:not(.dt-hide-export)',
                        }
                    },
                ],
            }
        ]
});

und im HTML-Code einfach die "anonymen" Klassen "dt-hide-colvis" und / oder "dt-hide-export" an den richtigen stellen einbinden
HTML: 
<thead>
    <tr>
        <th class="dt-hide-colvis dt-hide-export">tHead 1</th>
        <th class="dt-hide-colvis">tHead 2</th>
        <th class="">tHead 3</th>
        <th class="">tHead 4</th>
        <th class="">tHead 5</th>
        <th class="">tHead 6</th>
    </tr>
</thead>
und Fertig.
 
Die Klassen gibt es in DataTables nicht. Du kannst also irgendwas nehmen / benennen wie du willst.
Ich habe mich halt dafür entschieden ;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück