jQuery DataTables: How to show loading indicator during table reload

Recommended way to reload data in the table powered by jQuery DataTables is to use ajax.reload() API method.

jQuery DataTables allows to display a processing indicator using processing option. It is absolutely necessary in server-side processing mode to enable processing option to display a message during sorting, searching and pagination.

It is not obvious but we can use the same technique for client-side processing mode and enable processing option to display a loading indicator during table reloads.

By default, jQuery DataTables will display Processing... message when data is being retrieved. This message can be customized by setting language.processing option. It is also possible to use HTML markup as a value which allows to include images and CSS loaders as loading indicators.

Also in client-side processing mode jQuery DataTables displays another loading indicator but only during initialization. It appears under processing indicator during initialization which doesn’t look right. Luckily loading indicator can be disabled by setting language.loadingRecords option to  .

Example 1

Example below uses table in client-side processing mode, enables processing message, changes processing message to Loading... and disables initial loading indicator.

Example 2

Example below everything described in the previous example and HTML markup for language.processing option.

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.