Question posted in 
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>The table is the same because when I clicked the pagination and find the results, the function that paints the table is the same (and the “columns” class exists in all cases).
What happen?
If you need more information, please tell me.
3
Answers
Don't worry about that. I used the jQuery.Datatables(), more clean and it worked like a charm.
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.
you can use data table https://datatables.net/examples/data_sources/js_array
or a plugin using jquery.