Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pagination using Ajax in jquery Datatables

I am using dataTables plugin for a table on a page I am working on. Its basically fetching rows through an ajax call and in this ajax call, I send the search params that the user selects and the page number required. I need the Next, Previous, First and Last buttons to also fire the same ajax call, but with different page numbers, as the back-end interceptor depends on the page number.

This api call would return total no. of rows(say 1000) belonging for these search params and the rows with the page size( say 50).

Is there any way, I can use data table to do this?

like image 659
kshtjsnghl Avatar asked Jun 06 '11 12:06

kshtjsnghl


2 Answers

Yes you can do that,

Firstly, have a look in detail here

and then check the API to correctly display the buttons etc you want.

I'm using the same plugin in a very big projects and it works flawlessly.

The configuration type I use on my table is the following

$("#mytable").dataTable({"bJQueryUI": true,"sPaginationType": "full_numbers"}); 
like image 40
Oliver M Grech Avatar answered Oct 11 '22 20:10

Oliver M Grech


Yes, you can complete this and I have done it on a number of sites. The key is for the proper initialization of the datatable with code such as this:

var oTable = "";

$(document).ready(function() {
    oTable = $('#htmltableID').dataTable({
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "sAjaxSource": "/script-to-accept-request.php",
        "sServerMethod": "POST",
        "iDisplayLength": 50
    });
}

Once the page loads it will send a POST request to the source indicated. The request by default uses the GET method, but I choose to post that values instead.

You can add custom variables to be included in the default set by referring to http://www.datatables.net/release-datatables/examples/server_side/custom_vars.html

The server side code that will take the request will have to handle the iDisplayStart variable when the page is changed. This starts at 0 and then increases by the iDisplayLength value with each page. The example given by Oliver includes an example with PHP server side so that would really be helpful to review.

like image 200
Dan Avatar answered Oct 11 '22 18:10

Dan