How to set next page url using jQuery DataTable

Question

My server return data schema like this:

{
    "count": 161,
    "next": "http://127.0.0.1:8000/api/example/?page=3",
    "previous": "http://127.0.0.1:8000/api/example/?page=1",
    "results": [
        {
            "name": "foo",
            "version": "bar",
        }
    ]
}

And I using DataTable like this:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/example/?page=1"
    } );
} );

How can I change the data source from url:

"next": "http://127.0.0.1:8000/api/example/?page=3",

When I click DataTable next or previous button.How to custom the parameter (page here) to let DataTable know?

From the example here Object data source the schema like this:

{
  "draw": 3,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
  ]
}

Each time I click the next button, the "draw" parameter will return the current page number.Should I have to add this to my server response? Or I should custom the onclick event on "next" or "previous" button, using ajax to get data then redraw the table? I also look at the plugin here Pagination plug-ins, Should I use it?

I just want to get data from "next", but don't know hot to do that — Windsooon
– Windsooon, Commented Aug 22, 2016 at 6:01

Windsooon · Accepted Answer · 2016-08-23 05:52:11Z

4

This work, you can set limit and offset to handle this.

$(document).ready(function() {
        $('#pirate_table').DataTable( {
            "processing": true,
            "serverSide": true,
            "bPaginate": true,
            "ajax": function(data, callback, settings) {
                    $.get('/api/example/', {
                        limit: data.length,
                        offset: data.start,
                        }, function(res) {
                            callback({
                                recordsTotal: res.count,
                                recordsFiltered: res.count,
                                data: res.results
                            });
                        });
            },
            "columns": [
                { "data": "name" },
                { "data": "version" }
            ]
        } );
    });

answered Aug 23, 2016 at 5:52

Windsooon

7,2004 gold badges35 silver badges50 bronze badges

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

1 Comment

Yashwanth Over a year ago

I think the right description for the answer should be to use LimitOffset Pagination instead of PageNumber Pagination.

Collectives™ on Stack Overflow

How to set next page url using jQuery DataTable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related