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.