Select All Checkbox using Select Extension

Select All Checkbox using Select Extension

bjuneaubjuneau Posts: 20Questions: 5Answers: 1
edited August 2018 in Free community support

I wish there was documentation for this, but there isn't. I prefer to use checkboxes to select table rows. I have this working, but I really want a "select all" checkbox. Ideally it would select all rows when checked, and if a row was unchecked, it'd show indeterminate icon. I tried the Gyrocode version, but ran into a bunch of rendering issues with the latest version of DataTables. I'd prefer to use one plugin for my tables. Is there a way to use a check/select all input in the table header with the Select extension?

$('#table-general').DataTable( {
    "scrollY":        100,
    "scrollX":        true,
    "scrollCollapse": true,
    "fixedHeader":    true,
    "bInfo" :         false,
    scrollResize:     true,
    lengthChange:     false,
    searching:        false, 
    paging:           false,
    fixedColumns: {
        leftColumns: 1,
        rightColumns: 1
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'multi',
        selector: 'td:first-child'
    order: [[ 1, 'asc' ]]

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 5,492Questions: 19Answers: 1,226
    Answer ✓

    You can create a select all checkbox then use rows().select() and rows().deselect() to select or deselect all rows depending on the state fo the checkbox.


  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1

    Thanks! Gave it a try, and it works!

    $(".selectAll").on( "click", function(e) {
        if ($(this).is( ":checked" )) {
            DT1.rows(  ).select();         
        } else {
            DT1.rows(  ).deselect();  
Sign In or Register to comment.