CODEWITHSUNDEEP
jquerydatatable
Nick Kahn
Nick Kahn

Reputation: 20078

Displaying loading message - Jquery Datatables

UPDATE:

here is how my html looks like and I have angularjs directive that created for datatables 

<table id="vendor" ng-gridview="employee" resource="$employee">
  <thead>
    <tr>
      <th data-name="EmployeeId" data-width="50">Id</th>
      <th data-name="Name" data-width="75">Name</th>
      <th data-name="PhoneNumber" data-width="160">Phone Number</th>
      <th data-name="$options" data-width="160">Options</th>
    </tr>
  </thead>
</table>

How would I display processing message in DataTables whenever it loads the records? I have 20K records and take around 10-15 seconds to load. I am using MVC 5 action method pass the data

I tried using bProcessing as true and sProcessing to give custom progress message but it does not work. How can I achieve that?

/*! DataTables 1.10.2 */

Here is my JQuery Datatables settings:

 settings = {
                        'data': scope[attrs.ngModel] || {},
                        'oLanguage': {
                            'sSearch': 'Search: _INPUT_',
                            'sLengthMenu': attrs.title || 'Display _MENU_ items.',
                            'sInfo': 'Showing _START_ to _END_ of _TOTAL_ items.',
                            "bProcessing": true,
                            "bServerSide": true,
                            "bDeferRender": true,

                            'sLoadingRecords': 'Please wait - loading...',
                            'sProcessing': '<div class="grid-loading"><img src="images/spinner.gif" width="32" align="middle" /> Loading</div>',
                            'sInfoEmpty': 'No entries to show'
                        },
                        'iDisplayLength': 10,
                        "lengthMenu": [5, 10, 20, 30, 50, 100],
                        'columnDefs': []
                    };

Upvotes: 3

Views: 16136

Answers (2)

oak.io
oak.io

Reputation: 56

[Duplicate] You can add in a spinner gif (find one here: http://www.ajaxload.info/) as a div where your table should be and then clear it when the table loads using initComplete.

Something like:

<img id="loading" src="/myspinner.gif">//put this right below `<div class="col-md-12">`

And then call your table like this:

var table = $('#tableId').DataTable( {

            initComplete: function(settings, json) {
                $("#tableId").removeClass("hide");
                $("#tableId").show();
                $("#loading").hide();
            },
     });

Check it here.

Upvotes: 1

chiliNUT
chiliNUT

Reputation: 19573

Assuming your table has <table id="table">

HTML

<div id="message">Loading, please wait</div>
<table id="table></table>

CSS

#table{
    display:none;
}

JS

$('#table').on('init.dt', function () {
    console.log('Table initialisation complete: ' + new Date().getTime());
    $('#table').show();
    $('#message').hide();
})
        .dataTable(settings);

Upvotes: 3

Related Questions