Progress bar on Client Side

kiruthika

Hi All,
Is it possible to display the progress bar on client side. If so, How can I do that?
I'm using version DataTable version (1.10.12)

kiruthika

Hi,

Is there any update on this?

allan

It depends what you want to show the progress of. For example, if you are loading data from the server in blocks, that would be something that you would need to show a progress bar for yourself.

Allan

sktmuni

Hi Allan,

I too have the same need.
I have around 5000 records pulling from database and displaying at client-side at a time with no pagination. There are around 6 columns and 5000 records to display. no issues while displaying, but while ordering data in IE 11 it is taking around 10 secs. The main problem I feel is while datatable doing background work it doesn't show any screen blocking or message, hence users can click sort able columns again and again which leads to IE crash

Is there any way like processing dialog enabled for client-side data processing.

allan

Have you enabled the processing option? Can you link to a page showing the issue please?

Allan

sktmuni

Yes I did that. Here is the code snippet
$('#grid1').dataTable({
"paging": false,
"processing" : true,
columns: [null, null, null, null, null, null, {"orderable": false}],
"order": [[0, "desc"]],
});

What I observed is, processing dialog is working only with serverSide is enabled.

Please suggest

kthorngren

I think the problem is the processing text is displayed in the middle of the page. If you have 5000 records then it will show on line 2500. You can try this by setting paging to true. You should see the processing message around row 5. Next change the paging to 20 and you should see the message around line 10.

You can use the processing event to display a processing message in a more convenient place on the page.

Kevin

sktmuni

Thank you Kevin. This is what I was looking for.

Is there any way I can call datatable predefined processing dialog box?

the reason I am asking is, I used jquery dialog in "processing" event, the funny thing is at very first time my dialog is working as per the height and width but once the all records are rendered then suddenly dialog height, width is getting override.
Don't know the jquery dialog is ignoring height parameter if the DOM is getting changed in the background.

Thanks

allan

Yes, there is a plug-in for it.

Allan

sktmuni

I was facing problem with title-less jquery dialog. Finally with the help of processing event and jQuery blockUI plug-in, I was able to show the custom processing message.

$(document).ready(function () {
$('#grid1').DataTable({
"paging": false,
"processing": true,
"columns": [null, null, null, null, null, null, {"orderable": false}],
"order": [[1, "desc"]]
});
}).on("processing.dt", function (e, settings, processing) {
if (processing) {
$.blockUI(
{
message: "

Please Wait..!

",
});
} else {
$.unblockUI();
}
});

Thanks all, for your support.