Show processing indicator while searching.

DilipNikam

In my case I am binding the data from server to table at the time of page load. Around 1500-2000 rows with 14 columns of record binded to table. When trying to search its work very slow. For that I wanted to show processing message so user will wait till search Complete.

Can you please let me know how to show the search message while searching.

Below is the my table.

_tableInvoice = $('#tableInvoice').dataTable({
                "scrollY": tableHeight + 'px',
                "scrollX": "100%",
                "scrollCollapse": false,
                "sPaginationType": "full_numbers",
                "bSort": false,
                "bAutoWidth": false, // Disable the auto width calculation 
                "bDeferRender": true, //Deferred rendering can provide huge speed boost if using ajax or JS data source 
                "jQueryUI": true,
                "bLengthChange": true,
                "bPaginate": false,
                "bProcessing": true,
                "aaSorting": [[1, "asc"]],           // By default, sort by Quote No. Descending
                "sAjaxSource": "3WayMatching.aspx/GetInvoiceLineItems",
                "fnServerData": function (sSource, aoData, fnCallback) {
                    aoData.push({ "name": "roleId", "value": "admin" }); //input param for service.
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success": function (msg) {
                            var json = jQuery.parseJSON(msg.d);
                            fnCallback(json);
                            $("#tableInvoice").show();
                        },
                        error: function (xhr, textStatus, error) {
                            if (typeof console == "object") {
                                console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                                alert(error);
                            }
                        }
                    });
                },
                "columns": [
                      {
                          data: "InvoiceLineItemCheckBox",
                          render: function (data, type, row) {
                              if (type === 'display') {
                                  return '<input type="checkbox" name="tableInvoice_LineItemChekbox"  class="LineItem_Checkbox editor-active-checkbox">';
                              }
                              return data;
                          },
                          className: "dt-body-center"
                      },
                      { "data": "Description" },
                      { "data": "Code" },
                      { "data": "Qty" },
                      { "data": "UnPrice" },
                      { "data": "Disc" },
                      { "data": "TAX_VAT" },
                      { "data": "TOT" },
                      { "data": "Currency" },
                      { "data": "UM" },
                      { "data": "InvoiceLineItemID" }
                ],
                "columnDefs": [
                                   {
                                       "targets": 10,//INVLineItemID
                                       "visible": false,
                                       "searchable": true,
                                       "width": "0px"
                                   }

                ],
                "oLanguage": {
                    "sEmptyTable": "No Invoice Line Items available to match.",        // Change the empty table text
                    "sSearch": "Search:",
                    "sProcessing": "Processing..."
                },
                rowCallback: function (row, data) {
                    // Resolving Bug - Checkbox checked state not maintain
                    //Here we are checked the checkboxes which are checked before search.
                    $('input.editor-active-checkbox', row).prop('checked', $(row).hasClass('selected'));
                }
            });

Do let me know if I am doing anything wrong here.....