How to grey out datatable(overlay) on sProcessing

MayurP

Hi all,

I'm showing processing icon (loader) on ajax call by using below code,

[code]$('#blViewTab_processing').css("visibility","visible");[/code]

But I also wanted to grey out whole datatable when process is going on.

Please let me know how to achieve this?

Thanks in advance.

xilax

Do this instead:

set "bProcessing" to true as in
[code] "bProcessing": true, [/code]

and
[code]
"oLanguage": {
"sProcessing": "Loading, please wait..."
}
[/code]

xilax

Then style your sProcessing css

e.g
[code]
table.dataTable td.dataTables_empty{text-align:center}
.dataTables_processing{position:absolute; top:50%; left:50%; width:250px; min-height:30px; margin-left:-125px; margin-top:10px; padding:10px 0 10px 0; border:1px solid #ddd; text-align:center; color:#999; font-size:14px; background-color:white; z-index:100}
[/code]

MayurP

Hi xilax,

I've already tried the same but when i'm calling ajax url at that time,

I want to grey out complete datatable(overlay) so that user will not able to update/search/filter any data from UI Screen.

Thanks.

xilax

Then make use of blockUI(). Check out http://malsup.com/jquery/block/

xilax

For quick implementation,(to save you time)

[code]
doBlockUI : function(domElement, loadMsg){
if(loadMsg == null)
loadMsg = '';
var el = $(domElement);
el.block({
overlayCSS: {
backgroundColor: '#f2f2f2'
},
message: loadMsg,
css: {
border: 'none',
color: '#333',
background: 'none'
}
});
},
[/code]

I copied it out of my jquery extention; just tweak to your need.
So you can call $.doBlockUI("#elementIDorByNameorSomething");

MayurP

Thanks xilax