Showing jquery UI dialog while datatable is processing the pagination

jomsk1e

I have thousand of rows that are being process by jQuery datatables. I am doing client side processing, it took around 3-5 seconds for it to process the pagination and sorting.

What I want to do is to show a dialog while processing the datatables.

But the problem is even I will put the 'dialog open' before the initialization of the datatables, it will always run 1st the processing of datatables before the dialog will be shown.

In short, the datatables is run first before showing the dialog. I want to show dialog while processing the datatables. Then close the dialog once done.

Here's what I'm doing:

    ("#dialog").dialog({
        open: function () {
            showTable();
        }
    });

    function showTable() {
        var table = $('#dataTable').DataTable({
            "deferRender": true,

            "columnDefs": [
                { "visible": false, "targets": 2 }
            ],
            "order": [[2, 'asc']],
            "drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(2, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="5" bgcolor="#C0C0C0">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
        });
    }