jQuery Loop through selected rows of html element - Datatables

Question

I am using JQUERY datatables to enhance my standard HTML table on the web page. Currently I have checkbox that users can select up to 5 items on the table. I have the below code which allows users to select on any row which then highlights a leaflet JS map (this bit works completely fine).

However, what I am trying to do is not allow users to click on every row but only the 5 selected rows. The issue now is table.rows.length is 2000 rather than 5 as I need to somehow change this to only look for the selected rows.

The below code currently works for every row in the table labelled ID: tabledt. How can I change my code below to only allow this functionality on the 5 selected rows rather than every row they click on?

A class 'selected' gets added to the attribute which gets selected.

    var prevHighlightMarker = undefined;
var table = document.getElementById("tabledt");
if (table) {
    for (var i = 0; i < table.rows.length; i++) {
        table.rows[i].onclick = function () {
            highlightMarker(prevHighlightMarker, false);
            tableText(this);
            highlightMarker(cMarkers[$(this).data('id')], true);
        };
    }
}

The below code is how the data table gets defined and how I limit to only 5 rows:

    var table = $('#tabledt').DataTable({
    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: [0]
    }],
    select: {
        style: 'os',
        selector: 'td:first-child'
        
    },
    order: [[1, 'asc']]
});

table.on('select', function (e, dt, type, ix) {
    var selected = dt.rows({ selected: true });


    if (selected.count() > 5) {
        dt.rows(ix).deselect();
    }

    //var rowData = dt.rows({ selected: true }).data().toArray();

});

firatozcevahir · Accepted Answer · 2020-11-20 11:17:26Z

1

You can do something like this to check if the item contains the class:

var table = document.getElementById("tabledt");
if (table) {
    for (var i = 0; i < table.rows.length; i++) {
        table.rows[i].onclick = function () {
            if (this.classList.contains('selected')) {
                highlightMarker(prevHighlightMarker, false);
                tableText(this);
                highlightMarker(cMarkers[$(this).data('id')], true);
            }
        };
    }
}

answered Nov 20, 2020 at 11:17

firatozcevahir

9025 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Loop through selected rows of html element - Datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related