DataTables: difference between draw() and ajax.reload()?

Question

So far I've been using draw() to reload tables with serverSide enabled and using ajax to get the data. I just stumbled across ajax.reload(), but I can't figure out from the docs what the difference is supposed to be. I tried it out and it appears to behave exactly the same as draw with the following type of setup:

myTable = new DataTable("#myTable", {
    serverSide: true,
    ajax: {
        url: "/get_data/",
        // addAjaxData adds data from a form or from history.state to data
        data: function(data) { addAjaxData(data); },
    },
    // other options
});

So what is the difference between draw() and ajax.reload() in tables like this?

I would say, draw is first and foremost meant to handle changes to the table on the client side; whereas ajax.reload is for reloading data that might have changed in between on the server side. — C3roe
– C3roe, Commented Mar 3 at 14:31
@C3roe So (in this case), the difference is mostly semantic and not functional? — bur
– bur, Commented Mar 3 at 15:24

M B · Accepted Answer · 2025-03-04 06:11:21Z

1

When using DataTables with serverSide: true, both draw() and ajax.reload() appear to refresh the table, but they function differently.

1. draw()

The primary function of draw() is to re-render the table using the existing data.

If server-side processing (serverSide: true) is enabled, calling draw() triggers an AJAX request, fetching new data from the server only if the current dataset is outdated.

The table retains any additional parameters already sent in the previous request.

You can pass a parameter like .draw(false) to prevent pagination from resetting to the first page.

2. ajax.reload()

The main purpose of ajax.reload() is to explicitly request new data from the server by triggering an AJAX call regardless of the table's state.

It does not just re-render but fetches fresh data from the server and completely replaces the table's data.

By default, it resets the pagination to the first page unless you pass false as a parameter (ajax.reload(null, false)).

Use draw() when you only want to refresh the table without forcing a full AJAX reload.

Use ajax.reload() when you need fresh data from the server immediately (e.g., after updating records).

In your case, if you notice no difference, it's likely because your setup automatically requests new data on draw(), making both functions appear similar. However, ajax.reload() ensures a fresh request every time, making it the safer choice for real-time updates.

answered Mar 4 at 6:11

M B

113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bur Mar 5 at 10:45

I still don't fully understand. Using draw reloads the ajax no matter what in this case. Is it because I'm using a function for the ajax data? Does it not reload the ajax if nothing about the table has changed when using static data?

M B Mar 5 at 16:47

draw() and ajax.reload() seem the same for you because your ajax.data is a function, which triggers a new request every time. Normally: draw() only refreshes the table and fetches data if needed. ajax.reload() always forces a fresh AJAX request from the server. With static data, draw() wouldn't always trigger AJAX, but since you're using a function, it does—making it act like ajax.reload(). Try using static data to see the difference!

Harmony Oct 29 at 20:12

I am trying to use draw function but "Processing" dialog won't disappear

Collectives™ on Stack Overflow

DataTables: difference between draw() and ajax.reload()?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related