I need to hide the excel/pdf/print buttons and searchbox on datatable when no result on filtering

rishikachoubey

I have a page which uses shows the records in the datatable. The first half of the page has search critierias based on the search criteria results are fetched into the datatable. When the results are fetched excel/pdf/print and search textbox options are visible.

However, I need to hide the excel/pdf/print and search textbox options when the search criteria doesn't get any result.Below is the code for your reference.

var actionUrl = formActionUrl("AirlineCardAndCaseReport", "GenerateCardCaseReport");
var countryIdValue = $("#ddlCountry").val();
var airportIdValue = $("#ddlAirport").val();
var dateFromValue = $("#DateFrom").val();
var accountIdValue = $("#UserName").val();
var dateToValue = $("#DateTo").val();
var typeOfClaimValue = $("#TypeOfClaim").val();
var currencyValue = $("#CurrencyId").val();

    var model = {
        CountryId: countryIdValue,
        AirportId: airportIdValue,
        DateFrom: dateFromValue,
        UserId: accountIdValue,
        DateTo: dateToValue,
        TypeOfClaim: typeOfClaimValue,
        CurrencyId: currencyValue
    }

var table = $('#AirlineCardAndCaseReportTable').DataTable({
dom: 'Bfrtip',
buttons: [
'excel', 'pdf', 'print'
],
"pageLength": 10,
"pagingType": "full_numbers",
"language": {
"paginate": {
"first": '<<',
"previous": '<',
"next": '>',
"last": '>>'
},
"aria": {
"paginate": {
"first": 'First',
"previous": 'Previous',
"next": 'Next',
"last": 'Last'
}
}
},
"ajax": {
"url": actionUrl,
"type": "POST",
"datatype": "json",
"data": model,
},
destroy: true,
"columns": [ ......................],
"columnDefs": [{ orderable: false, targets: [0, 1, 2, 3, 4, 5, 6, 7] }],
"order": [],
});

Kindly, revert with the solution.

rf1234

You can use this to get the page length: https://datatables.net/reference/api/page.len()

If you need an event to notice a change in page length this is the one to use:
https://datatables.net/reference/event/length

To hide the buttons if page length is zero you could do this:

First add a class name to the buttons:

buttons: [
{extend: "excel", className: "buttonsToHide"},
{extend: "pdf", className: "buttonsToHide"},
{extend: "print", className: "buttonsToHide"}
],

This to hide the buttons (if you use bootstrap - otherwise CSS)

table.buttons('.buttonsToHide').nodes().addClass('hidden');

CSS could look like this - never tried it though:

table.buttons('.buttonsToHide').nodes().css("display", "none");

unhide if page length > 0

table.buttons('.buttonsToHide').nodes().removeClass('hidden');
or
table.buttons('.buttonsToHide').nodes().css("display", "list-item");

allan

A plug-in for this sort of thing was contributed a while back which might be of some interest.

Allan