Javascript 对表进行分页和排序时出现问题

我制作了一个带有分页的Javascript表。分页调用js文件中的LoadFunction，在我拥有的项目集合中，我获取结果并显示它

因此，如果我加载页面并单击表的标题列，它将正确排序。但是，当我单击分页以更改结果页面并再次单击标题列时，排序不起作用

在调试控制台时，我看到它在排序代码中第一次停止，但在分页之后，不要停止

小提琴：

$（'.columns th'）。在（“单击”，函数（）上）{
var i=$（this.index（）；
var cols=$（'.th'列）；
各列（功能（索引、项目）{
如果（索引！=i）{
if（$（项）.children（）.length==2）{
if（$（this）.children（）.hasClass（'fa-sort-up'）| |$（this）.children（）.hasClass（'fa-sort-down'））{
$（this.children（）[1].remove（）；
}
}否则{
if（$（this）.children（）.hasClass（'fa-sort-up'）| |$（this）.children（）.hasClass（'fa-sort-down'））{
$（this.children（）.remove（）；
}
}
}
});
if（$（this.children（）.length！=0）{
var图标；
if（$（this.children（）.length==2）{
icon=$（this.children（）[1]
}否则{
icon=$（this.children（）[0]
};
if（$（icon）.hasClass（'fa-sort-up'））{
$（icon.removeClass（'fa-sort-up'）；
$（icon.addClass（'fa-sort-down'）；
}否则{
if（$（icon.hasClass（'fa-sort-down'））{
$（icon.removeClass（'fa-sort-down'）；
$（icon.addClass（'fa-sort-up'）；
}
}
}否则{
$（此）。附加（“”）；
}
});

$（文档）.ready（函数（）{
变量选项={
ValueName:['column1'，'column2']，
listClass:'主行'
};
var sortColumns=新列表（'tableUsers'，选项）；
$（'.th'）。在（“单击”，函数（）上）{
var i=$（this.index（）；
var cols=$（'.th'列）；
各列（功能（索引、项目）{
如果（索引！=i）{
if（$（项）.children（）.length==2）{
if（$（this）.children（）.hasClass（'fa-sort-up'）| |$（this）.children（）.hasClass（'fa-sort-down'））{
$（this.children（）[1].remove（）；
}
}否则{
if（$（this）.children（）.hasClass（'fa-sort-up'）| |$（this）.children（）.hasClass（'fa-sort-down'））{
$（this.children（）.remove（）；
}
}
}
});
if（$（this.children（）.length！=0）{
var图标；
if（$（this.children（）.length==2）{
icon=$（this.children（）[1]
}否则{
icon=$（this.children（）[0]
};
if（$（icon）.hasClass（'fa-sort-up'））{
$（icon.removeClass（'fa-sort-up'）；
$（icon.addClass（'fa-sort-down'）；
}否则{
if（$（icon.hasClass（'fa-sort-down'））{
$（icon.removeClass（'fa-sort-down'）；
$（icon.addClass（'fa-sort-up'）；
}
}
}否则{
$（此）。附加（“”）；
} 
});
});
身份证件
日期
709
7/11/2019 14:13:47
737
8/11/2019 14:34:04
740
11/11/2019 10:09:45
798
14/11/2019 12:33:58
802
14/11/2019 14:30:03
别担心。我使用了jQuery.Datatables（），它更干净，工作起来很有魅力。
这里的问题是在标题元素中添加了单击功能：
ID和Date

当您使用函数DrawItems显示表格时，您正在使用函数DrawTableHeader一次又一次地创建header元素。但是，只有在文档第一次准备就绪时（在fiddle:
$（'.columns th'）.on（“click”，function（）{}）的html部分的第29行），才添加单击功能。

这意味着，第一次将onclick添加到页眉时，它可以工作，但当您单击页码时，会再次调用函数DrawItems，并调用函数DrawTableHeader。这次创建的ID和日期没有任何单击功能

因此，每次使用函数DrawTableHeader创建header元素时，都需要添加onclick功能

注意以下几点。在这里，我在两个位置添加了console.log。请运行代码并注意，单击页码后，第一个控制台不会执行，因为一旦分页后显示列表，就会创建没有onclick功能的新元素

只需在我添加另一个控制台（在JSFIDLE链接中）的地方添加功能，您的代码就可以正常运行。

希望能有帮助。如有任何澄清/混淆，请回复。
您可以使用数据表
或者使用jquery的插件
我在代码中没有看到任何
LoadFunction
定义或调用。我也看不到您可以单击的任何分页。请提供可以复制此问题的代码。为什么不使用DataTable？？Th