The issue here is the addition of click functionality to your header elements: ID and Date
.(这里的问题是在标题元素中添加了点击功能: 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.(使用函数DrawItems显示表时,将一次又一次使用DrawTableHeader函数创建头元素。) 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(){}))
.(但是,只有在第一次准备好文档时才添加单击功能(在小提琴的html部分的第29行: $('.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.(这意味着,第一次将onclick添加到标题中并且可以使用,但是当您单击页码时,将再次调用DrawItems函数,并调用DrawTableHeader函数。) This time the ID and Date are created without any click functionality.(这次创建的ID和日期没有任何点击功能。)
So, you need to add the onclick functionality each time you are creating the header element using the function DrawTableHeader(因此,每次使用DrawTableHeader函数创建标题元素时,都需要添加onclick功能。)
Observe the following JSFiddle .(观察以下JSFiddle 。) Here, I have added the console.log at 2 places.(在这里,我在2个地方添加了console.log。) 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.(请运行代码,并观察到单击页码后,由于在分页后显示列表后,将创建不具有onclick功能的新元素,因此不会执行第一个控制台。)
Just add the functionality at the place where I have added the other console (in the JSFiddle link) and your code will run fine.(只需在我添加其他控制台的地方(在JSFiddle链接中)添加功能,您的代码即可正常运行。)
Hope it helps.(希望能帮助到你。) Revert for any clarifications/confusion.(还原为任何澄清/混淆。) 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…