Datatables draw() without ajax call

Question

I'm trying to resize jquery Datatables to fit the screen size. Datatables runs in server-side mode (property "serverSide": true). When the window size is changed I make recalculation of new datatables height and then call draw(false) to redraw the layout of datatable.

Unfortunately, the draw() method makes an ajax call and this makes the solution unusable, because it shows "processing" and takes time to get the data on every small window change.

How to redraw datatables layout without calling AJAX? I don't need to refresh data, I just want to redraw the table.

Nonfulfillment

Answer 1

I replaced the calling of table.draw(false) to table.columns.adjust(). It renders the table with new height and width without an AJAX call, so the issue is resolved for me. However it would be nice to know the proper way to render dataTables without an AJAX call in server-side mode.

Nonfulfillment

Answer 2

I faced same problem. I solved it with fake AJAX response. Here's some code to show how it works:

Variables:

var skipAjax = false, // flag to use fake AJAX
    skipAjaxDrawValue = 0; // draw sent to server needs to match draw returned by server

---

DataTable AJAX definition:

ajax: {
    url: ajaxURL,
    type: 'POST',
    data: function(data) { //this function allows interaction with data to be passed to server
        if (skipAjax) { //if fake AJAX flag is set
            skipAjaxDrawValue = data.draw; //get draw value to be sent to server
        }

        return data; //pass on data to be sent to server
    },
    beforeSend: function(jqXHR, settings) { //this function allows to interact with AJAX object just before data is sent to server
        if (skipAjax) { //if fake AJAX flag is set
            var lastResponse = dataTable.ajax.json(); //get last server response
            lastResponse.draw = skipAjaxDrawValue; //change draw value to match draw value of current request

            this.success(lastResponse); //call success function of current AJAX object (while passing fake data) which is used by DataTable on successful response from server

            skipAjax = false; //reset the flag

            return false; //cancel current AJAX request
        }
    }
}

---

How to use:

skipAjax = true; //set the fake AJAX flag

dataTable.draw('page'); //call draw function of a DataTable requesting to re-draw just the current page

Tabling

Works! I put those skipAjax and skipAjaxDrawValue as table data. $('#mytable').data('skipAjax', true) etc. – Prudence

Answer 3

As I understand you are doing server side recalculations for "Datatables" or any other page element based on clientside window width / height.. right? That makes no sense to do that on back or server side, but to do it on the clientside!

There are already great client side css frameworks that automatically do that for you if you change your html markup that is comming from the server a little.. it will render greatly for any screen resolution for and client (client here is, desktop, mobile, tablet browser)

I would suggest to look for more info and especially for example sections on this frameworks.

http://getbootstrap.com/

I would suggest to take a look on tables section and on this class I think that could help: .table-responsive

http://getbootstrap.com/css/#tables

hth, kreso

Usherette

Maybe this is not clear from my question: but I don't want to resize html layout on server size, I want to redraw Datatables layout on client, but DataTables runs in servers-side mode (property "serverSide"=true). I already use bootstrap with datatables, what I need to redraw it without AJAX call – Nonfulfillment

I didn't understand you very well first time,, I think that if you post your draw function we could help you more precisely :) – Usherette

you can find draw function in datatables library sources on github. – Nonfulfillment