How to disable a button until at least 1 row has been selected in table
How to disable a button until at least 1 row has been selected in table
confusedUser1
Posts: 5Questions: 3Answers: 0
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();
}
});
})
});
Answers
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
and then
That will work or you can use the
selectedor to enable with just one selected row withselectedSingle. These are from the Select extension. Other options can be found here.Kevin
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:
Colin