How to disable a button until at least 1 row has been selected in table

confusedUser1

I apologize if this has been asked before and I missed it in my search. I would like to disable my "Transfer Selected Airports" button until at least 1 record has been selected in the table using the select-checkbox in targets: 0. Any help your direction would be greatly appreciated.

$(document).ready(function () {

    var cols = [{ data: null, title: "Select", defaultContent: '' },
    { data: "continentName", title: "Continent" },
    { data: "countryName", title: "Country" },
    { data: "regionName", title: "Region Name" },
    { data: "airport", title: "ICAO" },
    { data: "nbrAircraft", title: "# JetNet AC" },
    { data: "airportName", title: "Airport" }
    ];

    var table = $('#transferAirports').DataTable({
        "pageLength": 15,
        "columns": cols,
        deferRender: true,

        dom: '<"top"Q>rt<"bottom"Bip>',

        language: {
            searchBuilder: {
                add: 'Add Search Conditions',
                title: {
                    0: 'Custom Search Builder:',
                    _: 'Active Filter Rules (%d):',
                },
            },
        },
        buttons: [
            {
                className: "btn btn-outline-primary",
                text: "Transfer 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=Transfer",
                        data: addAirports,
                        dataType: "json",
                        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                        contentType: "application/json; charset=utf-8",
                        complete: function () {
                            window.location.href = "/"
                        }
                    })
                }
            }
        ],
        columnDefs: [
            {
                defaultContent: '',
                targets: 0,
                data: null,
                defaultContent: '',
                orderable: false,
                className: 'select-checkbox select-enabled' 
            },
            {
                targets: 1,
                width: 200
            }
        ],
        select: {
            style: 'multi',
            selector: '.select-enabled',
            info: true
        },
        order: [[1, 'asc']]
    });

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

confusedUser1

Update. I found a solution that seems to work. I would appreciate any feedback if I missed something.

set initial button state to enabled: false

 buttons: [
     {
         enabled: false,
         className: "btn btn-outline-primary",
         text: "Transfer Selected Airports", 
         ...

and then

     $(document).ready(function () {
       var DT1 = $('#transferAirports').DataTable();
       table.on('select deselect', function () {
           var selectedRows = table.rows({ selected: true }).count();
           table.button(0).enable( selectedRows > 0 );
       });
       $(".selectAll").on("click", function (e) {
           if ($(this).is(":checked")) {
               DT1.rows({ search: "applied" },).select();
               DT1.buttons(0).enable();
           } else {
               DT1.rows({ search: "applied" },).deselect();
               DT1.buttons(0).disable();
           }
       });
   })

kthorngren

That will work or you can use the selected or to enable with just one selected row with selectedSingle. These are from the Select extension. Other options can be found here.

Kevin

colin

Here's an example demonstrating Kevin's suggested (I missed his reply and knocked it out before I noticed it!).

Here's the code of interest:

  buttons: [
    {
      extend: 'selected',
      text: 'alert',
      action: function() {
        alert('Hello')
      }
    }
  ]

Colin