Adding progress load icon to ajax.url().load request

Adding progress load icon to ajax.url().load request

dylanmacdylanmac Posts: 49Questions: 7Answers: 1

I am filtering my table by posting parameters via an ajax request (on checkbox click). I want to signal to users that the new table content is being fetched and to sit tight. Unfortunately without some kind of loading gif the checkbox simply looks unresponsive.

I am using the processing: true and the language: loadingRecords settings for the initial table draw. But I don't know how (or if) that technique can be applied to this use case.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    What is the Ajax request you are using? A custom one, or one of the DataTables API methods such as ajax.reload()? If the former, then you will need to show your own "processing" indicator (although a plug-in might allow you to use the DataTables one). If the latter, then DataTables should be doing it for you.

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    I'm using the standard load() method:

    var $table = $('#table').DataTable();
    $table.ajax.url('/path/to/ajax').load();

    I'm using an API method. How would DT know to use the processing indicator? I don't specify it in the call. Regardless, it's not using it which is how I arrived here. Thanks Allan.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    When you call ajax.url().load() it goes though this point in the code which will show the processing display (assuming you have enabled processing).

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    Oh so it picks up the settings of the original DataTable object (which has the processing set to true) even though I am redefining it with $table = $('#table').DataTable()?

    On that note I put in a "deferLoading" so that I could see the processing message display. Works on initial table load, but not on the ajax.url().load() call. If it's picking up the original settings why isn't this working?

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Oh so it picks up the settings of the original DataTable object

    Correct - $().DataTable() just gives you are reference to an existing table if no parameters are passed in and the table exists already.

    If it's picking up the original settings why isn't this working?

    Not sure. Can you link to a test case showing the issue please.

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    edited April 2015

    OK I figured out how to fix this for anyone else having this issue. It's not particularly intuitive.

    Add these settings to your datatables object:

    "dom": 'rtip', // the "r" is for the "processing" message
    "language": {
    "processing": "<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span>"
    }, // you can put text or html here in the language.processing setting.
    "processing": true, // you have to set this to true as well

    Now, let's say you want to show the processing icon when you click on a filter that sends a new ajax request. You will probably want to display the icon in the middle of the tbody, and increase opacity of the tbody so that the loading icon stands out: You can add a class to your tbody when you initiate the request, like so:

    $table.find('tbody').addClass('loading');

    and then remove it after the ajax loads:

    $table.ajax.url('/path/to/json').load(function() {
    $table.find('tbody').removeClass('loading');
    });

    Finally, the processing icon really should be placed in the middle of the tbody:

    .dataTables_processing {
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 100;
    }

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Thanks for posting your findings!

    Allan

  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

    I tried with my case (with "dom": '<"top">rtS<"bottom"if><"clear">' ) and does not seem to work. I'm not sure what's the problem. Could you let me know where is the css for class 'loading' defined ? Also could you post (or send me) a complete sample codes ?

    Thanks,
    Gary

  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

    Okay, it works when I remove the 'S' (scroller) from the 'dom'. Any suggestions how to make it works for Scroller extension ?

    Gary

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Gary, could you link to a test case showing the issue please? It might just be a CSS error. Try putting the r option in dom after the t.

    Allan

  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

    I can not set up a test url for you to look, but I tried the following codes (without the db load part). During the test, I found out, it does not work for dom with 'S' (Scroller), is due to the "paging" has to set to 'true'. If I set "paging" to 'false', it works (the ajax.url.load will show 'Processing...'), but the DataTables complains on warning that pagination MUST be enabled. Any suggestions ?

    Here is the sample of test codes:

    <?php

    $output = <<<OUTPUT

    <!DOCTYPE html>
    <html>
    <head>
    <title>TaskView</title>

    <link id = "theme" type ="text/css" rel="stylesheet" href="../css/dataTables.scroller.min.css" charset="utf-8" media="all">
    <link id = "theme" type ="text/css" rel="stylesheet" href="../css/jquery.dataTables.css" charset="utf-8" media="all">
    
    <script type="text/javascript"  src="../js/jquery.js"></script>
    <script type="text/javascript"  src="../js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src="../js/dataTables.scroller.min.js"></script>
    

    </head>

    <body>

    Refresh
    TaskId TaskName State CtlAct Host Status StartTime Params
    var dt; $(document).ready(function() { var url = 'taskview_load.php?instance=ops7'; dt = $('#dt_id').DataTable( { "scrollY": 500, "scrollX": true, // "paging": false, // "dom": '<"top">tr<"bottom"if><"clear">', "dom": '<"top">trS<"bottom"if><"clear">', "processing": true, "ajax": url } ); $('#bt_refresh').click(function () { var url = 'taskview_load.php?instance=ops7'; dt.ajax.url( url ).load(null, true); } ); } );

    </body>
    </html>

    OUTPUT;

    echo $output;

  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

    Repost the sample codes:

    <?php
    
    $output = <<<OUTPUT
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>TaskView</title>
    
        <link id = "theme" type ="text/css" rel="stylesheet" href="../css/dataTables.scroller.min.css" charset="utf-8" media="all">
        <link id = "theme" type ="text/css" rel="stylesheet" href="../css/jquery.dataTables.css" charset="utf-8" media="all">
    
        <script type="text/javascript"  src="../js/jquery.js"></script>
        <script type="text/javascript"  src="../js/jquery.dataTables.min.js"></script>
        <script type="text/javascript"  src="../js/dataTables.scroller.min.js"></script>
    
    </head>
    
    <body>
    
    <div align='left' style="background:white">
    <button id="bt_refresh">Refresh</button>
    </br> </br>
    </div>
    
    <table id="dt_id" style="background:gray" class="compact hover order-column row-border"
           cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>TaskId</th>
                <th>TaskName</th>
                <th>State</th>
                <th>CtlAct</th>
                <th>Host</th>
                <th>Status</th>
                <th>StartTime</th>
                <th>Params</th>
            </tr>
        </thead>
    </table>
    
    <script type="text/javascript" >
    
        var dt;
    
        $(document).ready(function() {
    
            var url = 'taskview_load.php?instance=ops7';
    
            dt = $('#dt_id').DataTable( {
                "scrollY": 500,
                "scrollX": true,
    //            "paging": false,
    //            "dom": '<"top">tr<"bottom"if><"clear">',
                "dom": '<"top">trS<"bottom"if><"clear">',
                "processing": true,
                "ajax": url
            } );
    
    
            $('#bt_refresh').click(function () {
                var url = 'taskview_load.php?instance=ops7';
                dt.ajax.url( url ).load(null, false);
            } );
    
        } );
    
    </script>
    
    </body>
    </html>
    
    OUTPUT;
    
    echo $output;
    
  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    That looks like it should work okay to me, and I've just tried a local test and it does appear to do so. However, the processing element only shows while the Ajax request is being made, not at all times when the table has scrolled past the loaded data boundary.

    For that you need to use the loadingIndicator option - shown in this example.

    Allan

  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1

    Yes, the Scroller example you mentioned works okay, but I think it is for the 'serverSide: true'. I did test with the following codes, I can see the 'Loading...' when I reload the URL, but I cannot see that message when I click the Refresh button.

    html code: t.php

    <?php
    
    $output = <<<OUTPUT
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>TaskView</title>
    
        <link id = "theme" type ="text/css" rel="stylesheet" href="../css/jquery.dataTables.css" charset="utf-8" media="all">
        <link id = "theme" type ="text/css" rel="stylesheet" href="../css/dataTables.scroller.min.css" charset="utf-8" media="all">
    
        <script type="text/javascript"  src="../js/jquery.js"></script>
        <script type="text/javascript"  src="../js/jquery.dataTables.min.js"></script>
        <script type="text/javascript"  src="../js/dataTables.scroller.min.js"></script>
    
    </head>
    
    <body>
    
    <div align='left' style="background:white">
    <button id="bt_refresh">Refresh</button>
    </br> </br>
    </div>
    
    <table id="dt_id" style="background:gray" class="compact hover order-column row-border"
           cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>
    
    <script type="text/javascript" >
    
        var dt;
    
        $(document).ready(function() {
    
            dt = $('#dt_id').DataTable( {
                ajax:           "t_load.php",
                dom: "rtiS",
                scrollY: 200,
                scroller: {
                    loadingIndicator: true
                }
            } );
    
            $('#bt_refresh').click(function () {
                var url = 't_load.php';
                dt.ajax.url( url ).load(null, true);
            } );
    
        } );
    
    </script>
    
    </body>
    </html>
    
    OUTPUT;
    
    echo $output;
    

    codes for ajax load (t_load.php)

    <?php
    
    for ($i = 0; $i <= 50000; $i++) {
        $dsp_rows[] = array($i+1, 'b', 'c', $i, 'd');
    }
    
    $arr = array (
        "draw" =>  $request['draw'],
        "data" => $dsp_rows,
    );
    
    echo json_encode($arr);
    
  • gfu14416gfu14416 Posts: 8Questions: 1Answers: 1
    Answer ✓

    Just to update the status. The problem solved after I put the line

    .dataTables_processing { z-index: 999; }

    after

    th,td { font-size:12px; white-space: nowrap; overflow: hidden; text-align: left;}

    in one of my css file.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    Excellent - good to hear you got it working and thanks for posting back your findings. I will look into updating the z-indexes for all of the DataTable libraries to make them consistent.

    Allan

This discussion has been closed.