Clever Geek Handbook

Datatables draw () without ajax call

I am trying to resize jquery Datatables to fit the screen size. Datatables runs in server side mode (property "serverSide": true

). When the window resizes, I do a recalculation of the new data height and then call draw(false)

to redraw the datatable layout.

Unfortunately the method draw()

makes an ajax call and this makes the solution unusable as it shows "processing" and takes a while to get data every time the small window changes.

How can I redraw the datatables layout without an AJAX call? I don't need to update the data, I just want to redraw the table.

+3


source to share


3 answers


I replaced the call table.draw(false)

with table.columns.adjust()

. It renders the table with the new height and width without an AJAX call, so the problem is solved for me. However, it would be nice to know the correct way to render dataTables without an AJAX call in server side mode.



+3


source


I had the same problem. I solved this with a 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
+2


source


As I understand it, you are doing server side recalculations for "Datatables" or any other page element based on the client window width / height. It doesn't make sense to do it on the server side or on the server side, but do it on the client side!

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

I would suggest looking for more information and especially the sections dedicated to these frameworks.

http://getbootstrap.com/

I would suggest taking a look at the tables section and this class, I think this might help: .table-responsive

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

hth, kreso

+1


source






More articles:


All Articles