How can I run synchronous table.draws()?
How can I run synchronous table.draws()?

Hello everyone. I hope you're doing well.
I'm having a problem where I need to print all the table rows. For this, I use two draws(), but the problem is that I need them to be synchronous and they're happening asynchronously, meaning that for example $table.page.len(50).draw() is happening before $table.page.len(-1).draw(), even though it's supposed to be the other way around. I've tried coding eventListeners for Draw(), but I can't emulate the synchronicity.
What I wanted to do was this:
$table.page.len(-1).draw()
wait for draw
print the loaded table
$table.page.len(50).draw()
wait for draw, to reset table
I'm using a SetTimeout as a workaround, but I find it unreliable, because what if the rows exponentially increase in the future?
I'll leave the code here. Thanks for all the help!
protected static PrintAllDocAction(elemsToHide: string[]) {
let $table = $('.dataTable').DataTable();
$table.page.len(-1).draw();
setTimeout(function ()
{
window.print();
$table.page.len(50).draw();
}, 5000);
}
Replies
Sounds like you are using server side processing,
serverSide: true
. Try using a single instance of thedraw
event, something like this pseudo code:Note the use of
one instead of
on. It should execute once after the
$table.page.len(-1).draw();` is complete.Kevin
It worked!...Almost completely. I needed to sharpen one edge, because when the print window was showing, it was showing with a loading symbolinstead of the rows, which probably meant that the draw had finished but it was still somehow rendering the table? I did this slight adjustment:
$table.one('draw', function() {
setTimeout(function () {
window.print();
$table.page.len(50).draw();
}, 1000);
});
I had to do a timeout still, but I think it's safer now, since the big draw has finished.
Thanks a lot, once again!!