Problem with pagination and sorting a table

Problem with pagination and sorting a table

spring boot pagination and sorting example
hibernate pagination sorting
pagerequest sort by
pagination with order by
page sorting
repository pagination java
pagination url parameters
api sort endpoint

I made a Javascript table with pagination. The pagination calls a LoadFunction in js file that, of the collection of items that I have, I take the results and show it.

So, If I load the page and click a header column of the table, it sorts correctly. But, when I click the pagination to change the results page and click again the header column, the sorting doesn't work.

When debugging the console I saw that stops the first time in sort code, but after paginate, don't stop.

Fiddle: Fiddle

$('.columns th').on("click", function() {
  var i = $(this).index();
  var cols = $('.columns th');

  cols.each(function(index, item) {
    if (index != i) {
      if ($(item).children().length == 2) {
        if ($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')) {
          $(this).children()[1].remove();
        }
      } else {
        if ($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')) {
          $(this).children().remove();
        }
      }
    }
  });

  if ($(this).children().length != 0) {
    var icon;

    if ($(this).children().length == 2) {
      icon = $(this).children()[1]
    } else {
      icon = $(this).children()[0]
    };

    if ($(icon).hasClass('fa-sort-up')) {
      $(icon).removeClass('fa-sort-up');
      $(icon).addClass('fa-sort-down');
    } else {
      if ($(icon).hasClass('fa-sort-down')) {
        $(icon).removeClass('fa-sort-down');
        $(icon).addClass('fa-sort-up');
      }
    }
  } else {
    $(this).append('<i class="fa fa-sort-up"></i>');
  }
});
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function(){
            var options = {
                valueNames: [ 'column1', 'column2' ],
		        listClass: 'main-rows'
	        };

            var sortColumns = new List('tableUsers', options);

            $('.columns th').on("click", function(){
                var i = $(this).index();
                var cols = $('.columns th');
                
                cols.each(function(index, item){
                    if(index != i){
                        if($(item).children().length == 2){
                            if($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')){
                                $(this).children()[1].remove();
                            }
                        }else{
                            if($(this).children().hasClass('fa-sort-up') || $(this).children().hasClass('fa-sort-down')){
                                $(this).children().remove();
                            }
                        }
                    }
                });

                if($(this).children().length != 0){
                    var icon;

                    if($(this).children().length == 2){
                        icon = $(this).children()[1]
                    }else{
                        icon = $(this).children()[0]
                    };
                    
                    if($(icon).hasClass('fa-sort-up')){
                        $(icon).removeClass('fa-sort-up');
                        $(icon).addClass('fa-sort-down');
                    }else{
                        if($(icon).hasClass('fa-sort-down')){
                            $(icon).removeClass('fa-sort-down');
                            $(icon).addClass('fa-sort-up');
                        }
                    }
                }else{
                    $(this).append('<i class="fa fa-sort-up"></i>');
                } 
            });
        });
    </script>
</head>
<body>
    <div class="col-12">
        <table id="tableUsers" class="table table-bordered m-table">
            <thead class="columns">
                <tr>
                <th class="column1 sort text-center" data-sort="column1" style="width: 50% !important;">Id</th>
                <th class="column2 sort text-center" data-sort="column2" style="width: 50% !important;">Date</th>
                </tr>
            </thead>
            <tbody class="main-rows list">
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">709</td>
                <td class="column2 sort text-center" style="width: 50% !important;">7/11/2019 14:13:47</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">737</td>
                <td class="column2 sort text-center" style="width: 50% !important;">8/11/2019 14:34:04</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">740</td>
                <td class="column2 sort text-center" style="width: 50% !important;">11/11/2019 10:09:45</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">798</td>
                <td class="column2 sort text-center" style="width: 50% !important;">14/11/2019 12:33:58</td>
                </tr>
                <tr class="tdRow">
                <td class="column1 sort text-center" style="width: 50% !important;">802</td>
                <td class="column2 sort text-center" style="width: 50% !important;">14/11/2019 14:30:03</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

you can use data table https://datatables.net/examples/data_sources/js_array or a plugin using jquery.

Sorting a Paginated Record Set User Experience Expectation, The boys in the back garden. Here's a story to illustrates the problem with tables and pagination: "Good morning Mr. Smith! Here, per your� Then we will discuss the sorting of Angular Material table and pagination. Importing Angular Material DataTable Modules: Before adding Angular Material data table module you have to add


The issue here is the addition of click functionality to your header elements: ID and Date.

You are creating the header elements with the function DrawTableHeader again and again when you are showing the table using the function DrawItems. But you are adding the click functionality only when the document is ready for the first time (at line 29 in html part of fiddle: $('.columns th').on("click", function(){})).

This means, that first time onclick is added to header and it works but when you click the page numbers, the function DrawItems is called again and it calls function DrawTableHeader. This time the ID and Date are created without any click functionality.

So, you need to add the onclick functionality each time you are creating the header element using the function DrawTableHeader

Observe the following JSFiddle. Here, I have added the console.log at 2 places. Please run the code and observe that after you click the page numbers, the first console is not executed due to the fact that once you show the list after the pagination, the new elements are created which don't have onclick functionality.

Just add the functionality at the place where I have added the other console (in the JSFiddle link) and your code will run fine.

Hope it helps. Revert for any clarifications/confusion.

Intercept the change in status of the column sorting for table , Is your feature request related to a problem? Please describe. I'm using the server-side paging table, the problem that when I try to sort data by� The Table Sortable jQuery plugin helps you render a customizable dynamic data table from JSON or JavaScript objects, with paginate, live filter, and data sort capabilities. How to use it: 1.


Don't worry about that. I used the jQuery.Datatables(), more clean and it worked like a charm.

DataTable sorting broken when using pagination � Issue #2618 , The entries in the table should be sorted. Minimal reproduction of the problem with instructions. Create a DataTable that is not lazy loaded and� Or until the page is so long that the scroll wheel breaks off and the browser crashes. And for good reason. It's a somewhat tedious and needlessly complicated task normally. But a very much needed tedious and complicated task. The following script is designed to handle any and all client side pagination for HTML tables once and for all.


Table pagination and sorting, These are the instructions for implementing your own pagination and sorting. Testing and fixing accessibility issues � Accessible Rich Internet Applications� If you want records to be displayed in the sorted order only without any pagination then pass only Sort object. Sort sortKey = Sort.by("lastName"); If you want to sort on more than one fields then you combine sorting fields using and method. For example if you want to sort on both lastName and firstName fields.


Angular Material Table, Filter, Sorting, Paging, Angular Material Table, Filter, Sorting, Paging. Posted by Using Material Table to Display Data; Sorting Data in Material Table; Filter Functionality in Material Table; Paging Btw, I have an issue with pagination, wish you could help me out . By default, pagination is initialized with Previous, page numbers and Next buttons. To manipulate the table pagination we can use one of the options presented below. To start working with our tables see the "Getting Started" tab on this page. Note: This integration is available from version 4.5.7 (released 16.07.2018).


Laravel: Using Pagination, Sorting and Filtering with Your Tables , The problem with displaying these tables is that you need to make them sortable and filterable. Plus, you may need to paginate your results� Introduction In this blog, we will learn how to use DataTable.js to create a grid with pagination, sorting, filter etc.,using jQuery. Most developers create a simple HTML table and write huge amounts of code to make a grid with sorting, paging, etc. features .