How do I show a "Loading..." message when I load the table from a new Ajax call?

How do I show a "Loading..." message when I load the table from a new Ajax call?

travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0

I am using 1.10.1. I have a working button (called running) like this:

$('#reload').click(function (){

        var path = "/runningdata";
        var dt=$('#running').DataTable( );
        dt.clear();
        dt.draw();
        dt.ajax.url(path).load();

    });

It does not display the "Loading... Message, though. How can I get that displayed on a subsequent load?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin

    Do you have the processing option enabled?

    Allan

  • travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0

    Thanks for the quick reply. Sorry, yes.( I want to link to the page, but it is behind a password.) Here is the initial setup:

    $(document).ready(function() {
        var dt = $('#running').DataTable( {
        "dom": '<"clear">lfTrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
        "aButtons":[
            "copy",
            "csv",
            "pdf",
            "print"
        ]},
    
            "processing": true,
            "serverSide": false,
            "ajax": {
            "url":"some-site-with-data",
            "type":"GET"
        },
            "columns": [... ],
            "order": [[1, 'asc']]
        } );
    ...
    });
    

    as I noted, it works for the first load...

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin

    Interesting - it should work or all loads and that does appear to be the case here: http://live.datatables.net/lomapoke/1/edit .

    Can you link to a test case showing it not working please.

    Allan

  • travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0

    I will try to do a link. Right now it is password protected and I need to find a way to create a more public page.

    It is perhaps odd then when I click on reload I don't get a Loading message on your link either. I tried it in Firefox 30.0, Chrome and IE 11.

    --john

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin

    It is extremely fast (since I haven't got a delay in the loading of the server-side data), so it only flickers into place and is then very quickly removed.

    Allan

  • travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0

    I have not been able to create a public page. I created one with my reload code and the example from http://datatables.net/examples/server_side/row_details.html, but of course that works and displays the message on reload I can post the(minimally sanitized) page source, but it is about 250 lines long. Will that help?

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin

    What I think I would need is a JSFiddle, http://live.datatables.net or a link to a page showing the problem so I can reproduce what is going wrong and debug it.

    Allan

  • travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0
    edited August 2014

    I moved my stuff and your data/example as noted above and tried it out. I am finally able to duplicate the issue! Before adding the stylesheets ac.css and usage.css the "Processing..." message was to the right of the table, not directly over the content.

    (edited)

    I found the issue, but not the fix. I made the div containing the table in my "non-working" version very wide, like 1800 px. I got the "g..." at the edge of the table: it was behind the table.

    Here is the link to thed demo version: http://www.iamthesilly.com/testfordt.html
    I am not sure what css conflicts. I saw the message until I added usage.css and ac.css.
    (The date stuff was to see if the date picker I used was an issue.)

  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin
    Answer ✓

    Add: div.dataTables_processing { z-index: 1; } to your CSS and that should solve it. I'll look at adding something similar into the default CSS.

    Allan

  • travelerjjmtravelerjjm Posts: 11Questions: 1Answers: 0

    Fantastic! Worked like a charm. Thank you very much Allan.

This discussion has been closed.