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

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

rishikachoubeyrishikachoubey Posts: 1Questions: 1Answers: 0

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.

Answers

  • rf1234rf1234 Posts: 592Questions: 37Answers: 87
    edited February 14

    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");
    
  • allanallan Posts: 46,189Questions: 1Answers: 6,408 Site admin

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

    Allan

Sign In or Register to comment.