Help with a select all checkbox that selects search applied and select-enabled checkbox rows

confusedUser1

I have my table working, but I would like to modify the selectAll checkbox to only select rows where { search: 'applied' } **and ** where the checkbox className is 'select-enabled'. I have the selectAll working for { search: 'applied' }, and the className is assigned correctly based on rowData.rsmName == "Unassigned", but I can't find a way to add the second criteria of only those rows where the column 1 checkbox className = 'select-enabled'.

I have tried adding createdRow under the createdCell section, but I couldn't get it to work, so I am hoping for some help pointing me in the right direction.

$(document).ready(function () {

    var cols = [{ data: null, title: "Select", defaultContent: '' },
    { data: "continentName", title: "Continent Name" },
    { data: "countryName", title: "Country Name" },
    { data: "regionName", title: "Region Name" },
    { data: "regionCode", title: "Region Code" },
    { data: "airport", title: "Airport" },
    { data: "airportName", title: "Airport Name" },
    { data: "rsmName", title: "Assigned To" }
    ];

    var table = $('#assignAirports').DataTable({
        "columns": cols,
        dom: 'Bfrtip',
        oLanguage: {
            "sSearch": "Search Assigned Airports:"
        },
        buttons: [
            {
                text: "Assign Selected Airports",
                action: function (e, dt, node, config) {

                    var addAirports = table.rows({ selected: true }).data().toArray();

                    addAirports = JSON.stringify(addAirports);
                    $.ajax({
                        type: "post",
                        url: window.location.href + "&handler=Add",
                        data: addAirports,
                        dataType: "json",
                        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                        contentType: "application/json; charset=utf-8",
                        complete: function () {
                            window.location.href = "/RSM"
                        }
                    })
                }

            }
        ],
        columnDefs: [
            {
                defaultContent: '',
                targets: 0,
                data: null,
                defaultContent: '',
                orderable: false,
                className: 'select-checkbox select-enabled',
                createdCell: function (td, cellData, rowData, row, col) {
                    if (rowData.rsmName == 'Unassigned') {
                        $(td).addClass('select-enabled')
                    } else {
                        $(td).removeClass('select-enabled');
                    }
                },
                targets: 0,
                visible: true
            }],
        select: {
            style: 'multi',
            selector: '.select-enabled',
            info: true
        },
        order: [[1, 'asc']]
    });

    $(document).ready(function () {
        var DT1 = $('#assignAirports').DataTable();
        $(".selectAll").on("click", function (e) {
            if ($(this).is(":checked")) {
                DT1.rows({ search: 'applied' }).select();
            } else {
                DT1.rows({ search: 'applied' }).deselect();
            }

        });
    })
});

allan

I'd use a function for the row selector for this (it operates on the data rather than the assigned class name to a cell - you could use that, but this will be faster):

DT1.rows(
  function (idx, data, node) {
    return data.rsmName == "Unassigned";
  },
  { search: "applied" },
).select();

Allan

kthorngren

One option might be to add the select-enabled class to the row instead of a cell. This way you can use the row-selector of a class in combination of the selector-modifier. Something like this:

DT1.rows('.select-enabled', { search: 'applied' }).select();

The forth parameter of columns.createdCell is the row index. You could do something like this to add the class to the row:

                createdCell: function (td, cellData, rowData, row, col) {
                    var node = this.api().row( row ).node();
                    if (rowData.rsmName == 'Unassigned') {
                        $(node).addClass('select-enabled')
                    } else {
                        $(node).removeClass('select-enabled');
                    }
                },

Or you can use createdRow to have access to the tr to apply the class.

If you still need help please provide a simple test case that we can update to help with your solution.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

EDIT: Looks like Allan and I responded at the same time. Allan's solution looks to be the simplest

Kevin

allan

I was actually initially thinking along exactly the same lines, Kevin. Perhaps moving the class to the row using rowCallback or createdRow. There is a potential conflict if using deferRender with that method though.

I do like the function selector - need to push that a little more

Allan

confusedUser1

Thanks everyone. Allan's function for the row selector solution works great!