Data loading/processing message

natraj

I am loading around 3000 rows of data into the datatable and it take about 6-8 seconds to load. While the loading happens I want to show a message or a spinner, notifying the user that the data is being loaded. I tried using the "language: LoadingRecords" option but cannot get it to work. can someone help with this ? This is my JS snippet:

$(document).ready(function() {
    $('#tableFilterSimple').DataTable( {
        dom: 'C<"clear">Rlfrtip',
        "order": [],
        "processing": true,
        "language": {
             "loadingRecords": "Loading...",
             "processing":     "Processing..."
        },
        columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        }, {
            targets: [ 4 ],
            orderData: [ 4, 0 ]
        } ],
        responsive: true
    } );
} );

and my HTML:

<table id="tableFilterSimple" class="display table-bordered nowrap">
    <thead>
        <tr>
            <th th:text="#{Header 1}" class="text-center"/>
            <th th:text="#{Header 2}" class="text-center"/>
        </tr>
    </thead>
    <tbody>
        <tr th:each="customObject : ${listOfDbObjects}">
            <td th:text="${customObject.column_1}" align="center" class="pad10"/>
            <td th:text="${customObject.column_2}" align="center" class="pad10"/>
        </tr>
    </tbody>
</table>

jacob.steinberger

https://datatables.net/reference/option/language.loadingRecords

"When using Ajax sourced data and during the first draw"

From your example, you aren't using Ajaxed sourced data. Would highly recommend.

natraj

I am re-using this data table for quite a few result sets. So I am passing a list of object to the html table and then applying the data table API on it. Do you think I can achieve showing the spinner or Loading message this way ? Or having the ajax data source is mandatory for this ?
This is what I am doing:

<table id="tableFilterSimple" class="display table-bordered nowrap">
    <thead>
        <tr>
            <th th:text="#{Header 1}" class="text-center"/>
            <th th:text="#{Header 2}" class="text-center"/>
        </tr>
    </thead>
    <tbody>
        <tr th:each="customObject : ${listOfDbObjects}">
            <td th:text="${customObject.column_1}" align="center" class="pad10"/>
            <td th:text="${customObject.column_2}" align="center" class="pad10"/>
        </tr>
    </tbody>
</table>

allan

Part of the issue is that those 6-8 seconds will be before the DataTable can even start to load since it needs to wait for the document to be fully downloaded. Also, once it has then it takes a finite amount of time for the Javascript to read the table.

If you wish to improve performance I would suggest you use Ajax as Jacob suggested. See also this faq.

A final option is just to include a spinner in your HTML. Then once the DataTable has initialised, remove it with Javascript.

Allan