How to prevent a selected row from being deselected when clicking on it again?

takida1

I'm using the new DataTables with the Select module and ajax automatic reloading.

select: { style: "single" },

The question is:
How to prevent a row from being deselected when the user clicks on a selected row again?

Yes, I googled a lot (thanks Flying Spaghetti Monster it's Friday and I had time to uselessly bang my head against the wall). Somewhere on this forum a developer from the DataTables team told he or she might implement some sort of "preSelect" event hook later, but it's hasn't been done yet. I don't really want to edit the DataTables source code of my project in order not to turn the later upgrades into a nightmare. Hopefully my humble post doesn't look arrogant, but I think such functionality should be standard.

Yes, I already tried all kind of things (found a lot of examples here and in the internet). I was pragmatically selecting and deselecting rows when catching the 'select' and 'deselect' events, but it doesn't work properly with the ajax' auto-reload feature ( table.ajax.reload(null, false); ) as it's keeping only the last selected raw thanks to the rowId option passed to DataTables initialisation, even if I use the nice way of selecting the row with table.row(index).select() function; It's important to let the developer check the events BEFORE they would be fired in order to decide if they would to be fired or not, and not just afterwards.

Eventually I solved this problem with using the select: { style: 'api ' } option instead of the select: { style: 'single' } option, and it even works properly with the ajax reloading feature and Select's rowId option, but... we can do it better than that, right?

The final solution I implemented:

    table = $("#table-list").DataTable({
[...]
        ajax: 'http://website.com/path',
[...]
        s̶e̶l̶e̶c̶t̶:̶ ̶{̶ ̶s̶t̶y̶l̶e̶:̶ ̶"̶s̶i̶n̶g̶l̶e̶"̶ ̶}̶,̶
        select: { style: 'api' },
[...]
    });

    $("#table-list tbody").on("mousedown", "tr", function(event) {
[...]
        // Getting the row index:
        var index = table.row(this).index();
[...]
        // Selecting the row pragmatically:
        table.row(index).select(index);
[...]
        // De-selecting the row pragmatically:
        table.row(index).deselect(index);
[...]
        // Getting row data (for example, in order to check row validity etc
        var data = table.row(this).data();

        console.log(data.row_id);
        console.log(data.firstname);
        console.log(data.lastname);
[...]
    });

Thanks for a great DataTables project though, overall I liked it a lot, 5/5.

allan

a developer from the DataTables team told he or she might implement some sort of "preSelect" event hook later, but it's hasn't been done yet

It has - user-select and that is the way you would do it. You could use that event listener to check if the row clicked on was already selected - if so, return false. Otherwise do nothing (or return true if you prefer).

Allan

allan

p.s. Thanks for your kind words (and also for your detailed post) - both hugely appreciated!

takida1

Thanks! I can't believe I overlooked it, omg. Hope this thread might be helping for someone in the future though.

zootius

OK, so given that user-select returns a cell object, I had trouble finding out how to get that cell's parent row. And also, how to use the API to tell if a row is selected. In desperation, this is how I got it to work, but I'm hoping Allan can provide more info on the right way to do it.

myTable.on('user-select', function (e, dt, type, cell, originalEvent) {
    if ($(cell.node()).parent().hasClass('selected')) {
        e.preventDefault();
    }
});

Allan, can I also ask if there's an API method to find a row by it's key value? Would be very handy. Thanks for all your great work.

bindrid

Yes as shown here https://datatables.net/reference/type/row-selector.