Loading Gif while datatable builds

Pronizius

Hi all,

i have a question:
Is there a way that some loading gif is showing while the .datatable runs?

I create first a html table with around 500 entries and 15 Columns, also whits asp .net help.

Then i run the .datatable when the windows is loaded:

$(window).load(function () {
var oTable = $('#OpenTaskTable').dataTable({
"bJQueryUI": true,
"oLanguage": {
"sSearch": "Search all columns:"
}
});
...
});

The creation of the datatable takes around 7 - 9 Seconds, for this time my browswer (IE 8) stops completely and dont allow me anything.

Is there some option or workaround to show a loading gif for this time?
Maybe it has also something to do with the fact, that i develop a visual webpart for SharePoint which is nothing more than a ascx file in aspx site.

Thanks for you help

Best Regards

Martin

essexsteph

Here's what I do, I have a div where I want my table to appear which when the page loads has a gif in it:

[code]


Report Generating...





[/code]

Then a bit of Javascript/Jquery to load the table via AJAX:

[code]
$(document).ready(function() {
$.post(
"ajax_summaryreport.php",
showTable
)
}

function showTable(resp) {

// Show the table (replaces please wait)
$("#summarytable").html(resp);

// Set up the table
var oTable = $('#myTable').dataTable( );
}
[/code]

I've taken out some bits not needed for the explanation, but that's the basics.

Hope that helps,

Steph

Pronizius

Thanks a lot.
I needed to do it a little different, because it is SharePoint, but thanks for the great idea.

I just a little problem left.
With this solution, i have this loading image as long as in your case the php site and in my case the webservice builds this table.

But then when i call: var oTable = $('#myTable').dataTable( );
This Image stops for the time the DataTable needs to somehow "convert" it to jquery.

Is it possible, that the pic still is running?

Thanks a lot also for the fast answer!

Here is how i did it now:
[code]
$(window).load(function () {
var sWebURL2 = "<%= sWebURL %>";
$.ajax({
type: "POST",
url: "http://XXXX/XXXX/XXXX.XXXX/CreateRUOverviewTable",
data: JSON.stringify({ sWebURL: sWebURL2 }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
showTable(result.d);
},
error: function (result) {
alert(result.status + " " + result.statusText + " " + result.responseText);
}
});
});

function showTable(table) {
// Show the table (replaces please wait)
$("#summarytable").html(table);

// Set up the table
var oTable = $('#OpenTaskTable').dataTable({
"bJQueryUI": true,
"oLanguage": {
"sSearch": "Search all columns:"
}
});
...
}

[/code]

essexsteph

Sorry, I don't have this issue as my table only consists of a few lines of data which takes a while to calculate - hence the 'please wait' gif.