How do I show loading image while fetching the records on jQuery Datatable?

Question

I have a table with 5,00,000 records. That records I am trying to show in UI with search based with the help of jQuery Datatable.

After I clicked on search button it takes some time to fetch records to show in front end. So client asked ,to show loading image while fetching the records.

HTML Code Here:

<div layout:fragment="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header" style="color: #fff;background-color: #CCE5FF;border-color: #CCE5FF;">
                    <h3 class="box-title" style="color: black;">SearchZone</h3>
                    <div class="box-tools">
                        <div class="input-group" style="width: 150px;">
                        </div>
                    </div>
                </div>
                <!--  /.box-header -->
                <div class="box-body" style="background-color: #ecf0f5">
                    <hr style="margin-top:-8px;border-top: 1px solid #861c1c;">
                    </hr>
                    <div class="alert alert-danger" style="display: none;">
                        <strong style="margin-left: 391px; font-size: 22px;"></strong>
                        <h4 id="errortxn"></h4>
                    </div>
                    <form class="form-horizontal" method="post">
                        <div class="col-md-6" >
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="FromDate" style="font-size: 14px;">From Date</label>
                                <div class="col-md-6">
                                    <div class='input-group date' id='datetimepicker1' >
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                        <input type='text' name='from_txn_date'  id='from_txn_date'  class="form-control date"  placeholder="FromDate" style="width:168px;"/>
                                    </div>
                                </div>
                            </div>                           
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="ToDate" style="font-size: 14px;">To Date</label>
                                <div class="col-md-6">
                                    <div class='input-group date' id='datetimepicker2' >
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                        <input type='text'  name='to_txn_date'  id='to_txn_date'  class="form-control date"   placeholder="ToDate" style="width:168px;"/>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-group btnzone">
                                <button type="button"  class="btn btn-info"    id="searchbutton"  ><i class="fa fa-search"></i> Search</button>                              
                            </div>
                        </div>                        
                    </form>
                </div>
                <!-- end box body  -->
            </div>
            <!-- end box -->
        </div>
    </div>
    <!-- end row -->
    <div class="row">
        <div class="col-md-12">
            <div class="box" style="margin-top: -17px;">
                <div class="box-body table-responsive no-padding">
                    <table aria-describedby="log_info" role="grid" id="data" class="table table-bordered table-striped dataTable" style="margin-left: 0px;">
                        <thead style="color: black;background-color: #CCE5FF;border-color: #CCE5FF;">
                            <tr style="background-color:#CCE5FF">
                                <th>TxnId</th>
                                <th>Type</th>
                                <th>Amount</th>                             
                                <th>Mobile Number</th>
                                <th>Transaction Date</th>
                                <th>Status</th>                              
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- end box body --> 
            </div>
            <!-- end box -->
        </div>
    </div>       
</div>

JS Code Here:

$("button#searchbutton").click(function() {                           
    var fromDate = $("#from_txn_date").val();
    var toDate = $("#to_txn_date").val();

    $('#data').DataTable({
        "ajax" : "/doSearch?fromDate="+fromDate+"&toDate="+toDate,
        "bDestroy":true,
        "columns":[
            {"data": "txnid" },                                                             
            {"data": "type"},
            {"data": "amount"},                                             
            {"data": "mobileno"},
            {"data": "fromDate"},
            {"data": "status"}
        ],
        "order": [[ 1, "desc" ]],
        "language": {
            "lengthMenu": "| View _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        "pagingType": "full_numbers",
        "lengthChange": false 
    });
});

How to set loading image while fetching the records.

Answer 1

You can add custom loader directly into the DataTable by processing: true and for reference you could read this Datatable Custom Loader and also How to put image in loading

var fromDate = $("#from_txn_date").val();
var toDate = $("#to_txn_date").val();

$('#data').DataTable({
    processing: true,
    "language": {
        // Add loading image <img src="loader.gif" /> tag, or simple text
        "processing": "Please wait for the response..."
    },
    serverSide: true,
    ajax: "/doSearch?fromDate="+fromDate+"&toDate="+toDate
});

Answer 2

You can show your loading image before calling the DataTable in your click handler
And then hide it in the initComplete callback of your DataTable:

$("button#searchbutton").click(function() {                           
  var fromDate = $("#from_txn_date").val();
  var toDate = $("#to_txn_date").val();
  //SHOW YOUR LOADING IMAGE HERE

  $('#data').DataTable({
    "ajax" : "/doSearch?fromDate="+fromDate+"&toDate="+toDate,
    ...
    "initComplete": () => {
      //HIDE YOUR LOADING IMAGE HERE

    }
  });
});