Loading Ajax dataSrc Freezes Entire Already Loaded Page

iamjonmiller

I'm loading my Ajax source from a url which hosts some JSON. I've got everything working properly and the table looks great. There is just one problem. It seems that the actual Ajax call is happening synchronously.

When the page loads I have all kinds of stuff rendering. Some charts, and some small dataTables. This all happens very quickly and then last, in the background, I have this table being initialized. I spun it off to Ajax because it can potentially have up to around 60k rows.

So the page will render in less than a second or so and you can begin to navigate it, and then the Ajax POST happens and everything just freezes. You can't scroll. All clicks are queued up till after the Ajax is done. Then after a couple of seconds it is done and everything returns to a smooth normal.

Disregard the fact that the columns are empty, I dropped them for clarity. I'm just trying to figure out how to make sure that the Ajax load doesn't halt all other functionality on the page.

$.fn.dataTable.moment('MMM DD, YYYY');
var view_level = 1;
var filter_id = 9;

    $(document).ready(function () {
            $('#flowtimer-data-table').dataTable({
                "processing": true,
                "ajax": {
                    "processing": true,
                    "url": '/ajax/' + view_level + '/' + filter_id + '/',
                    "dataSrc": "",
                    "deferRender": true
                },
                "columns": [],
            });
    });

I thought by using deferRender I could make the table just sip the Ajax json link 10 rows at a time. Was I wrong? How can I solve this?

I appreciate any feedback. I can give further context, but this really is a complicated table and I am tying to focus on the Ajax part.

allan

It sounds like you might have async: false somewhere in your Ajax code. Could you link to a page showing the issue please?

Also it would be worth adding deferRender as you mention to speed up draw time.

Regards,
Allan

iamjonmiller

I had nested the deferRender option inside of the Ajax part, when it should have been outside. I moved it and it fixed my problem. Thank you for pointing that out!

iamjonmiller

$.fn.dataTable.moment('MMM DD, YYYY');
var view_level = 1;
var filter_id = 9;

    $(document).ready(function () {
            $('#flowtimer-data-table').dataTable({
                "processing": true,
                "ajax": {
                    "processing": true,
                    "url": '/ajax/' + view_level + '/' + filter_id + '/',
                    "dataSrc": "",
                },
                "deferRender": true,
                "columns": [],
            });
    });