Menu
I'm using datatables and have data being collected from a database to an array then displayed onscreen. All this works fine.
If the data is around 2000 rows and 7 columns it only takes a couple of seconds, however if it's 10,000 rows and 7 columns it can take around 30 -40 seconds, so I would like to add an overlay that greys out the screen and displays "Loading.. Please Wait"
I've tried various scripts and code that I've found on this site and online, but none seem to work. I usually get the delay followed by a flash of the overlay and then it's gone.
Can any one help ?
This is the datatables code I'm using :
UPDATE: This is the page without the DB queries.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
@import "layout_page.css";
@import "layout_table.css";
html { overflow-y: scroll; };
</style>
<link href="layout.css" rel="stylesheet" type="text/css">
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.dataTables.min.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.dataTables.editable.js" type="text/javascript"></script>
</head>
<body id="dt_test">
<div id="container"><div id="layout">
<?php
if(!function_exists('json_encode'))
{
include_once('JSON.php');
$GLOBALS['JSON_OBJECT'] = new Services_JSON();
function json_encode($value)
{ return $GLOBALS['JSON_OBJECT']->encode($value); }
function json_decode($value)
{ return $GLOBALS['JSON_OBJECT']->decode($value); }
}
//
// DB QUERIES
??
$result = json_encode($data);
?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"aaData": <?php echo $result ?>,
"aoColumns": [
{ "sTitle": "Order" },
{ "sTitle": "Name" },
{ "sTitle": "Rank" },
{ "sTitle": "Number", "sClass": "center" },
{ "sTitle": "Locale", "sClass": "center" },
{ "sTitle": "Email", "sClass": "center" },
{ "sTitle": "Description", "sClass": "center" }
],
"bJQueryUI": true,
"bProcessing": true,
"bSort": false,
"bSortClasses": false,
"bDeferRender": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = "users"+":"+aData[0];
$(nRow).attr("id",id);
return nRow;
}
} );
$('#example').dataTable().makeEditable({
sUpdateURL: "update.php",
});
} );
</script>
<div class='demo' id='demo' name='demo'></demo></div>
</div></div>
</body>
</html>
How would I add an overly that is displayed BEFORE anything else... then is removed one the table is ready ?
UPDATE: Updated my original post with the entire page minus the DB Queries. I need the Overlay to display BEFORE any DB queries happen and before datatables starts processing the table.
Thanks
673
You can do something like this :
CSS :
#overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 99999;
background-color: gray;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
display: none;
}
#overlay h2 {
position: fixed;
margin-left: 40%;
top: 40%;
}
markup :
<div id="overlay"><h2>Loading .. Please wait</h2></div>
when you want to show the message / overlay eg just before dataTable :
$("#overlay").show();
callback in your dataTable() when it has finished initalizing :
$('#example').dataTable( {
...
fnInitComplete : function() {
$("#overlay").hide();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
