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

dylanmac

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.

allan

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

dylanmac

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.

allan

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

dylanmac

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?

allan

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

dylanmac

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;
}

allan

Thanks for posting your findings!

Allan

gfu14416

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

gfu14416

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

Gary

allan

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

gfu14416

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;

gfu14416

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;

allan

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

gfu14416

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);

gfu14416

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.

allan

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