Datatables jquery plugin - limit number of selectable rows

Question

When row selection is enabled on a datatable, is there way to limit the number of rows a user can select? I only want users to be able to select a maximum of two rows and a minimum of one in the datatable, but I don't see an option in the Datatables API that describes how to do this?

Will I need to perform this manually in some callback that's triggered whenever a user selects a row? I'd like to avoid this if possible. Any help or insight is appreciated.

score 0 · Answer 1 · answered Aug 03 '12 at 19:34

Using datatables example:

$(document).ready(function() {
    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        // the following line do what you want
        else if(oTable.$('tr.row_selected').length < 2) {
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    /* Init the table */
    oTable = $('#example').dataTable( );
} );

Reference: select single row

score 0 · Accepted Answer · answered Aug 14 '12 at 23:01

Ok got an implementation working, so what I ended up doing was instead of limiting the number rows a user can select, I added some logic to deselect any previously selected row whenever a user clicked on another row. I treated the selection order as a queue, which I just implemented using an array, each time I push a new row to the queue, any previous element would get popped.

The size of the queue determines the number of rows a user can select, by setting the queue size to two, this allows up to two rows to be selected, when an additional row is selected, the first selected row is removed from the queue. I used the fnGetInstance() and fnDeselect() functions below for deselecting rows from my data table instance

//oldRow = first selected row from queue

var oTT = TableTools.fnGetInstance( 'MyDataTable' );
oTT.fnDeselect( oldRow );

score 0 · Answer 3 · 2021-01-27T15:29:44.303

As already pointed out in another answer, there is a single row slection example from DataTables, but unfortunately it is not fully usable and convincing. It's evident from the code that their solution is external to the package, but also from a testing experience you can see that the native selection count is not updated (and that's not nice).

Anyway the most important part of the above said example - if we want to partially re-use it - is the ability to catch the event in a situation that is not already natively managed by the table.on( 'deselect', feauture. Which situation is it? The Ctrl + click by which one can select multiple items. Therefore the new solution structure will be

table.on( 'click', 'tr', function () {
    // https://stackoverflow.com/a/42266749/11323942
    if ( event.ctrlKey ) {
        //is ctrl + click
        console.log("ctrl + click intercepted but forcing single select")
        // NOW WHAT TO DO?
    }
} );

The best thing to do now is deliver the control back to their framework's standard events. So

// NOW WHAT TO DO?
table.rows({ selected: true }).deselect();

The above limits the selection to a single row, but it's easy to extend to a different number of rows and of course now you can perform whatever reset action you might want in the appropriate way

table.on( 'deselect', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var deselectedrow = indexes[0]
        console.log('deselected row', deselectedrow);
        // perform whatever reset action you might need
    }
} );

Datatables jquery plugin - limit number of selectable rows

3 Answers3