How to sort only the current page using jQuery datatable

Question

I use jquery datatable for many projects and it works great for all scenarios.

For my current project, I need the sorting to be done only for the current page, but by default, datatable will sort the whole data and redraw the entire table.

I was sure that there would be some simple configuration to enable this function, but could not find anything but these lines from their forum

var table = $('#example').DataTable(); // Sort by column 1 and then re-draw table .order( [[ 1, 'asc' ]] ) .draw( false ); 

I tried this, but it doesn't seem to be affected. any of them have successfully implemented this before sharing their code.

Answer 1

Update 1

Although I agree with rtruszk, I still think that a solution should be found / investigated if 0) you have no choice or 1) your client does not want to discuss UX changes.

Working example: http://jsfiddle.net/ebRXw/63/

I was able to accomplish what you need by filtering out the currently visible rows from the DataTable. I tried my best to find a solution in DataTables, and it may exist, but in the end I used jQuery and a hash table to identify and filter the currently visible rows.

I am sure that this can be optimized. Hope this makes you move in the right direction.

 $(document).ready(function () { var table = $('#example').DataTable({ "columnDefs": [{ "targets": [0], "visible": false, "searchable": true }] }); // Show page 0 table.page(0).draw(false); // Sort by column 1 (Name) table.order([1, 'asc']).draw(false); $("#ReloadTable").click(function () { // Clear the current filter oTable = $('#example').dataTable(); oTable.fnFilter('', 0); oTable.fnFilter(''); // Reset all "visible" values in the first cell var table = $('#example').DataTable(); table.rows().indexes().each(function (idx) { var d = table.row(idx).data(); table.row(idx).data()[0] = 0; d.counter++; table.row(idx).data(d); }); }); $("#FilterCurrentPage").click(function () { // Create a hash of the index of currently visible rows var h = new Object(); var x = $('.odd,.even').filter(function () { var idx = $(this)[0]._DT_RowIndex; h[idx] = idx; return this.style.display == '' }); // update the first value based on the currently visible rows var table = $('#example').DataTable(); table.rows().indexes().each(function (idx) { var d = table.row(idx).data(); if (h.hasOwnProperty(idx)) { table.row(idx).data()[0] = 1; } d.counter++; table.row(idx).data(d); }); // filter rows with a value of 1 in the first cell oTable = $('#example').dataTable(); oTable.fnFilter(1, 0); }); }); 

---

Update 0

I still have not found a workaround, but I am convinced that it exists. The code below will select and return the current visible rows in your datatable.

 var x = $('.odd,.even').filter(function () { $(this).addClass('selected'); // Select the visible rows return this.style.display == '' }); 

---

In the DataTables support file :

Is there an easy way to tell datatables that I want to sort and redraw only the current pagination?

In DataTables 1.9- no, there is no way to do this, but in 1.10 you can use table.order (...). Draw (false); to save paging. 1.10 pre-beta is available in git if you want to give it bash :-)

Allan

via datatables: sort only the current pagination of the table

However, you can get the current visible lines, sort them and show them somehow. The code below provides the current visible lines after filtering.

 var table = $('#example').DataTable(); table.$('tr', {"filter":"applied"}); 

See also:

• jQuery DataTables. How to get filtered (visible) rows
• fnGetData for visible lines only
• Getting row data after filtering jQuery datatables

Answer 2

Before asking a question about sorting only the current page, we must answer the following questions:

• Why do we want to do this sorting?
• Should we do this?
• Is there any reason?
• What are the implications of such a decision?

When we want to execute a query and display a list of results, we are dealing with:

• search criteria
• sorting criteria
• pagination

These three elements are strongly connected, and they clearly define what the user sees on the screen.
We can have, for example, the following description:

There is a list of actors. It is sorted by name and paginated (50 items per page). And we are on the third page.

When we have such rules, the user has a good orientation on this list. He sees Michael Kane at the top and Sean Connery at the bottom of the page. When he wants to find Robert Duvall, he knows that he needs to go a few pages further. And when he wants these actors to be sorted by age, he simply resorts to the lists and returns to the first page.

But what if we provide additional sorting only for the current page? This will violate the integrity of the system. How does this sound if we tell the user:

Now you see the third page sorted by name of the list of actors (page) by age.

What can this user get by using only the current page? An age hierarchy of actors with a name starting with "C"? At the top of the page will be the oldest actor from this page. But the user does not know if he is the oldest actor in the entire list. And if not, on which page should he look for the elder? Such a refuge is useless and overrides the original sort (which was of some importance).

Such treatment can also lead to serious confusion. It may lose its focus on original page sorting and sorting.

Conclusions:

I see no reason in sorting one page. I find it harmful. Therefore, you should only use it if you have good reason.