CODEWITHSUNDEEP
jquerydatatablepagination
user1234
user1234

Reputation: 3159

Server side pagination using DataTables plugin

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

Upvotes: 14

Views: 60714

Answers (2)

Pranav Labhe
Pranav Labhe

Reputation: 1953

enter image description here

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

"iTotalDisplayRecord" will be total filtered records

Upvotes: 4

Jake Zieve
Jake Zieve

Reputation: 455

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?

Upvotes: 0

Related Questions