Datatables Alle auswählen Checkbox

Question

Die Demo auf der Auswahlliste funktioniert nicht wirklich. https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Was ist der beste Weg, um das Kontrollkästchen alle zu aktivieren, nachdem sie über die columnDef Attribute erstellt wurden?

Answer 1

Dies sollte für Sie arbeiten:

let example = $('#example').DataTable({ 
    columnDefs: [{ 
     orderable: false, 
     className: 'select-checkbox', 
     targets: 0 
    }], 
    select: { 
     style: 'os', 
     selector: 'td:first-child' 
    }, 
    order: [ 
     [1, 'asc'] 
    ] 
}); 
example.on("click", "th.select-checkbox", function() { 
    if ($("th.select-checkbox").hasClass("selected")) { 
     example.rows().deselect(); 
     $("th.select-checkbox").removeClass("selected"); 
    } else { 
     example.rows().select(); 
     $("th.select-checkbox").addClass("selected"); 
    } 
}).on("select deselect", function() { 
    ("Some selection or deselection going on") 
    if (example.rows({ 
      selected: true 
     }).count() !== example.rows().count()) { 
     $("th.select-checkbox").removeClass("selected"); 
    } else { 
     $("th.select-checkbox").addClass("selected"); 
    } 
}); 

ich dem CSS obwohl hinzugefügt haben:

table.dataTable tr th.select-checkbox.selected::after { 
    content: "✔"; 
    margin-top: -11px; 
    margin-left: -4px; 
    text-align: center; 
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px; 
} 

Arbeits JSFiddle, Hoffnung, das hilft.

Answer 2

Sie können Checkboxes Erweiterung für jQuery Datatables verwenden.

var table = $('#example').DataTable({ 
    'ajax': 'https://api.myjson.com/bins/1us28', 
    'columnDefs': [ 
     { 
     'targets': 0, 
     'checkboxes': { 
      'selectRow': true 
     } 
     } 
    ], 
    'select': { 
     'style': 'multi' 
    }, 
    'order': [[1, 'asc']] 
}); 

Code und Demonstration siehe this example.

Siehe Checkboxes Projektseite für more examples und documentation.