Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
358 views
in Technique[技术] by (71.8m points)

javascript - 分页和表格排序问题(Problem with pagination and sorting a table)

I made a Javascript table with pagination.(我用分页制作了一个Javascript表。)

The pagination calls a LoadFunction in js file that, of the collection of items that I have, I take the results and show it.(分页会在js文件中调用LoadFunction,在我拥有的项目集合中,我将结果显示出来。) 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).(该表是相同的,因为当我单击分页并找到结果时,绘制该表的函数是相同的(并且在所有情况下都存在“ columns”类)。) What happen?(发生什么事?) If you need more information, please tell me.(如果您需要更多信息,请告诉我。)   ask by Ferran Mu?oz translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.(还原为任何澄清/混淆。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...