Prevent multiple ajax calls from jquery datatable on server side pagination

Question

I have a jquery dataTable which sends a request to MVC controller using ajax and displays the data. It works fine with client side processing but response time is too slow because it retrieves all the records.

To make it faster server side pagination is required. The issue with server side pagination is that setting server side pagination to true in jquery datatable it makes multiple ajax requests.

I have been debugging it a lot but cant figure the problem which causes multiple ajax requests. I have implemented many different ways available on google but nothing worked.

How to make it work using server side pagination? How can I prevent multiple ajax calls? ( table is initialized under document.ready() )

document.ready(function() {

            $("#myTable").DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/home/LoadData",
                "type": "Get",
                "datatype": "json"
                "data":{ date:'date'},// parameter on controller to filter records 
            },
            "columns": [
                    { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                    { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                    { "data": "Phone", "name": "Phone", "autoWidth": true },
                    { "data": "Country", "name": "Country", "autoWidth": true },
                    { "data": "City", "name": "City", "autoWidth": true },
                    { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
            ]
        });

The data returned on first call is exactly what I want but multiple requests make it worse.

By default pagination alone won't make multiple AJAX requests on page change. We can't really help you without seeing your code as @Katie.Sun suggests — Rory McCrossan
– Rory McCrossan, Commented Nov 13, 2018 at 15:39

rashidali · Accepted Answer · 2018-11-14 16:30:58Z

1

I was adding the data to table on ajax success method even though I had defined the column definitions for it. Removing the success method solved the problem.

answered Nov 14, 2018 at 16:30

rashidali

3301 gold badge6 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Prevent multiple ajax calls from jquery datatable on server side pagination

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related