Select All Checkbox using Select Extension

bjuneau

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' ]]
});

kthorngren

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.

Kevin

bjuneau

Thanks! Gave it a try, and it works!

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

manjushaa123

Can you post the complete code please. I'm looking for the exact solution.

Thanks.

kthorngren

@manjushaa123

Other than creating a checkbox and using the Select Extension that is all the code you need. Copied it here as a demo:
http://live.datatables.net/sejexuge/1/edit

Kevin

manjushaa123

Thanks a lot... will check this.

gloriachen114

What if I only want to select the current page?

colin

You can use the selector-modifier value of {page: 'current'}, see updated example here,

Colin