Datatables - Hinzufügen einer Schaltfläche zu Kopf-oder Fußzeile

Kann mir jemand bitte erklären, wie Sie Schaltflächen hinzufügen, um die Kopf-oder Fußzeile?
Alan die Entwickler von Datatables, sagte Sie ausgeführt werden, aus einem webserver, um die Verwendung von Tabellen-Tools zu nutzen, die Tasten. Aber ich bin mit Datatables offline auf einem standalone-computer. Ich habe durch alle der ersten Seite Ergebnisse von Google auf die Schaltflächen hinzufügen und nichts scheint zu funktionieren.

Ich habe versucht das erstellen der button in html gibt es eine id:

 <button id="testbutton">Test</button>

Dann der Aufruf in sDom:

$(document).ready(function() {
  oTable = $('#users').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth":false,
    "sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"testbutton">ip>',
    "aaData": [
            [ 1, 2, 3, 4, 5 ]
    ]
   });
} );

Was mache ich falsch?

InformationsquelleAutor Quaking-Mess | 2014-02-04

Versuchen Sie dies:

"sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"#testbutton">ip>',

Genauer gesagt: <"#testbutton">

Müssen Sie die # weil testbutton ist Ihre id nicht Ihre class.

BEARBEITEN:
Nach einer weiteren Untersuchung fand ich eine viel sauberere sDom-format.

"sDom":'<"H"lfr>t<"F"ip>'

Dies ist die Standard-sDom Wert, so fügen Sie Ihre Schaltfläche einfach fügen Sie ein div-der sDom.

"sDom":'<"H"lfr>t<"F"<"testbutton">ip>'

Müssen Sie nicht hinzufügen jede html auf Ihre Seite. Sie können es tun alle mit jQuery. Die gesamte Arbeits-block sieht wie folgt aus:

$( function() {
    oTable = $( "#users" ).dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth":false,
        "sDom": '<"H"lfr>t<"F"<"testbuttonarea">ip>',
        "aaData": [ [1,2,3,4,5] ]
    });
    $( "#users div.testbuttonarea" ).html('<button id="testbutton">Test</button>');
} );

InformationsquelleAutor wesleywmd

1

Überprüfe ich zwei Möglichkeiten:

Beispiel mit reload-button

Erste:
1. Option:
  "dom": '<"fg-toolbar-ui-toolbar-ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"
  <"#reloadBtn">lfr>t<"fg-toolbar-ui-toolbar-ui-widget-header ui-helper-clearfix ui-corner-bl-ui-corner-br"ip - >'
2. Init-Ereignis:
       .auf('init.dt', function () {

          $('#reloadBtn').html('Refresh').button().click(function (event) {

                    ... klicken Sie auf code
          }).DataTable ()......
```
    var oTable = $('#DataResults').on('init.dt', function () {
        $('#reloadBtn').html('Refresh').button().click(function (event) {
            $(this).prop('disabled', true);
            oTable.ajax.reload(function (json) {
                $('#reloadBtn').prop('disabled', false);
            });
        });
    }).DataTable({
        "dom": '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
        ...
    });
```
Zweite:
1. Option ohne <"reloadBtn"> - tag im dom-string, aber mit zusätzlichen einzigartigen Klasse name dtwcHeader:
  
  "dom": '<"dtwcHeader fg-toolbar-ui-toolbar-ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"lfr>t<"fg-toolbar-ui-toolbar-ui-widget-header ui-helper-clearfix ui-corner-bl-ui-corner-br"ip - >'
2. Den gleichen init-Ereignis, aber mit der zusätzlichen Zeile :
         .auf('init.dt', function () {
  
            $('div.dtwcHeader').prepend('<button id="reloadBtn">Reload</button>');
  
            $('#reloadBtn').html('Refresh').button().click(function (event) {
  
                      ... klicken Sie auf code
            }).DataTable ()......
```
var oTable = $('#DataResults').on('init.dt', function () {
    $('div.dtwcHeader').prepend('<button id="reloadBtn">Reload</button>');
    $('#reloadBtn').html('Odśwież').button().click(function (event) {
        $(this).prop('disabled', true);
        oTable.ajax.reload(function (json) {
            $('#reloadBtn').prop('disabled', false);
        });
    });
}).DataTable({
    "dom": '<"dtwcHeader fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
    ...
});
```
Ohne init.dt-event .klicken Sie auf () - Funktion nicht binden-Taste, weil es noch nicht existiert.

Mir ajudou pela segunda vez! rs

InformationsquelleAutor PCGyver Fox

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.