jquery DataTables-Schaltflächen

Question

Ich habe Probleme beim Erstellen benutzerdefinierter Schaltflächen und Bearbeiten der buttons.dom.button-Eigenschaften. Hier ist der Code, den ich verwende;

$(document).ready(function() { 

function buildTable(tableName) { 
    return $('#'+tableName).DataTable({ 
     dom: 'ifrt', 
     paging: false, 
     lengthChange: true, 
     responsive: true, 
     columnDefs: [ 
      { 
       "targets": [ 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ], 
       "visible": false, 
       "searchable": false 
      }, 
      { 
       "orderable": false, 
       "targets": [0, 3, 4, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22] 
      }   
     ], 

     buttons: [ 

      'excel', 
      { 
       extend: 'columnToggle', 
       columns: 0, 
       text: 'show/hide pics' 
      }    
     ], 

     buttons: { 
      dom: { 
       button:{ 
       tag: 'li' 
       } 

      } 
     } 


    }); 
} 

var tablesMen = buildTable('menTable'); 

$('#menTable_wrapper').prepend('<div class="dropdown"><button class=btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>'); 

tablesMen.buttons().container().appendTo($('.dropdown-menu')); 

Die Tasten erhalten Reset auf Default (Excel, PDF, kopieren, etc.), wenn ich die

hinzufügen

buttons: { 
      dom: { 
       button:{ 
       tag: 'li' 
       } 

      } 
     } 

Ich hoffe, das macht Sinn.

Answer 1

Sie haben ein Array mit

buttons: [ dann sofort zu ersetzen, mit dem Objekt deklariert „Tasten“ genannt buttons: {

EDIT2: Hier ist Ihre Funktion, wo ich es verändert die dom als auch Attribut enthalten wie eine benutzerdefinierte Schaltfläche als Beispiel hinzugefügt:

function buildTable(tableName) { 
    return $('#' + tableName).DataTable({ 
     dom: 'Bfrtip', 
     paging: false, 
     lengthChange: true, 
     responsive: true, 
     columnDefs: [{ 
     "targets": [1, 2, 3], 
     "visible": true, 
     "searchable": false 
     }, { 
     "orderable": false, 
     "targets": [0, 4, 5] 
     }], 
     buttons: { 
     dom: { 
      button: { 
      tag: 'li' 
      } 
     }, 
     buttons: [{ 
      text: 'My button', 
      action: function(e, dt, node, config) { 
      alert('Button activated'); 
      } 
     }, { 
      extend: 'excel', 
      text: 'Save current page', 
      exportOptions: { 
      modifier: { 
       page: 'current' 
      } 
      } 
     }] 
     } 
    }); 
    } 

EDIT: Beachten Sie auch Anführungszeichen in der Zeichenfolge fehlt, hier das ist korrigiert:

$('#menTable_wrapper').prepend('<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>');