Server side pagination using DataTables plugin

Question

The server is returning 15 records per page and the total records are over 2000. I'd like to display first 15 records and then on every click of the 'Next' button , display the remaining all records, (15 per page). For this do we do a server side pagination or client side???

Here is my table and the attributes I'm using for pagination in DataTables:

  var tableData = self.accountCollection.getData();

        var tableColumns = this.accountCollection.getColumns();
        var totalRecs = this.accountCollection.length;

        //create the UI grid containing the list of items

        this.resultsTable = tableEl.dataTable( {
            "bServerSide": true,
            "sEcho": 3,
            "iTotalRecords": totalRecs,
            "iTotalDisplayRecords": 15,
            "aaData": tableData,
            "aoColumns": tableColumns,
            "aaSorting": [[1,'asc']],
           });



getData: function () {

        var returnData = [];
        $.each(this.models, function (idx, accountModel) {
            returnData.push(accountModel.attributes);
        });
        return returnData;
    },

The returnData will return me an Object that has fields I will be populating I a table.

Object returned (roughly):

Object
 accountName: "No Company"
 address1: "1234 asdf"
  address2: ""
  billingAcctId: null
  billingSystem: null
  city: "mountain view"
  comments: null
   country: "USA"

The getData() function will be then called to return the data from the database using:

var tableData = this.accountCollection.getData()

So basically tableData will have the necessary fields and values to display in table. Now I may have more than 1000 records returned from the server. Hence I needed pagination.

The one in fiddle is what I tried and does not have any impact on the paginatin.

I think I have the basic pagination that comes with the DataTables, but now I need to have a server side, to get only 15 records to display at a time, and on click of 'next' and 'prev' button i should be able to make ajax calls to get the remaining records 15 per page.

I hope this helps you understand better. Please let me know if you need more details.

How can I achieve pagination using DataTables?

Thanks

Pranav Labhe · Accepted Answer · 2015-05-29 11:43:12Z

4

enter image description here

Pagination works total displayed record you need to perform following minimum changes.

"iTotalDisplayRecord" will be total filtered records

answered May 29, 2015 at 11:43

Pranav Labhe

1,9631 gold badge19 silver badges24 bronze badges

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

Comments

Jake Zieve · Accepted Answer · 2014-09-19 01:11:06Z

0

This looks up your alley -> http://datatables.net/examples/data_sources/js_array.html It's purely client-side

Though, as far as I know, the only way to achieve actual pagination (making it faster because you're only fetching 15 records from the database at a time) is by ajax-ing with your server side (i.e. http://datatables.net/examples/data_sources/server_side.html)

It doesn't look to me like you're doing that. Unless... self.accountCollection.getData() is an ajax callback, but in any case when you instantiate the DataTable you should use "ajax: tableData" not "aaData: tableData".

You may be confusing the JSON that datatables returns, with the datatables API that you use to interact/initialize with the datatable.

Sorry, that was a bit much lol does any of that make sense?

answered Sep 19, 2014 at 1:11

Jake Zieve

4651 gold badge6 silver badges14 bronze badges

4 Comments

user1234 Over a year ago

well, 'self.accountCollection' is a fetching the users list from the server: something like below.. this.accountCollection = new ipiadmin.collections.AccountCollection(); does it still make sense to make a client side call..?

Jake Zieve Over a year ago

you could override self.accountCollection to include pagination details in the JSON that it fetches. Basically, you'd want your JSON to look something like {"sEcho": 15,"iTotalRecords": 2000, "iTotalDisplayRecords": 2000,"aaData": [your first 15 rows of data]} then use self.accountCollection as the ajax source in your datatable init. Also, just curious, what is your stack (client and server)?

user1234 Over a year ago

is there any way you could provide with an example...Thanks for the help!

Jake Zieve Over a year ago

Here's a fiddle (basically just a copy of the datatable's example). This is probably the easiest way to get something up and running with what you have. Sorry for the confusion, I was wrong before, you can't use the "ajax" parameter with a callback function (I was thinking of jQuery's success on ajax callback). If you want to ajax it (for true pagination), you need to hit the source on your backend like a php script or something (i.e. how does self.accountCollection.getData() actually work?).

Collectives™ on Stack Overflow

Server side pagination using DataTables plugin

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related