我用分页制作了一个Javascript表。分页会在js文件中调用LoadFunction，在我拥有的项目集合中，我将结果显示出来。
因此，如果我加载页面并单击表的标题列，它将正确排序。但是，当我单击分页以更改结果页面并再次单击标题列时，排序不起作用。
调试控制台时，我看到它第一次在排序代码中停止，但是在分页后，不要停止。
提琴：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>
该表是相同的，因为当我单击分页并找到结果时，绘制该表的函数是相同的（并且在所有情况下都存在“ columns”类）。
会发生什么？
如果您需要更多信息，请告诉我。
答案 0 :(得分：1)
这里的问题是在标题元素ID and Date中增加了点击功能。
当使用DrawItems函数显示表格时，将一次又一次使用DrawTableHeader函数创建头元素。但是，只有在第一次准备好文档时，您才添加单击功能（在小提琴的html部分的第29行：$('.columns th').on("click", function(){}))。
这意味着，第一次将onclick添加到标题中并且可以使用，但是当您单击页码时，将再次调用DrawItems函数，并调用DrawTableHeader函数。这次创建的ID和日期没有任何点击功能。
因此，每次使用DrawTableHeader函数创建标题元素时，都需要添加onclick功能
观察以下JSFiddle。在这里，我在2个地方添加了console.log。请运行代码，并观察到单击页码后，由于在分页后显示列表后，将创建不具有onclick功能的新元素，因此不会执行第一个控制台。
只需在我添加其他控制台的位置（在JSFiddle链接中）添加功能，您的代码即可正常运行。
希望有帮助。恢复以进行任何澄清/混淆。
答案 1 :(得分：1)
您可以使用数据表 https://datatables.net/examples/data_sources/js_array 或使用jQuery的插件。
答案 2 :(得分：0)
不用担心。我使用的是jQuery.Datatables（），它更干净，而且就像一个魅力一样。