jQuery TableSort插件

Question

我正在使用表操作的jquery插件，我在一件事上遇到了一点麻烦。

我有一个有10列的表，我有一个过滤器，如果我取消一个框，使用CSS display:none从表中删除关联的列。

这一切都很好，但是当我使用分页时，这些细节就会显示出来。

表分类器插件似乎放松了表数据并显示所有行，即使它们被设置为display:none。

如果没有显示/隐藏这些列，那么当触发分页时，这些列是否不显示？

谢谢

编辑：

    $("#searchContainer #toggleOptions ul li a").on(

          {click: function()

                  {

                      //detect classes
                      var currentButtonCnt = $(this).parent().attr("class");
                      var currentState = $(this).attr("class");

                      //remove _btn
                      currentButton = "."+currentButtonCnt.substr(0, currentButtonCnt.length-4); 

                       var ids = [];
                      //toggle  
                      if(currentState == "ticked"){

                              $(currentButton).hide();
                              $(this).removeClass('ticked')

                      }else{

                              $(currentButton).show();  
                              $(this).addClass('ticked')

                      }

                 }

          }//end click 

    )

Answer 1

看起来，每次为每一行/列切换页面时，Tablesorter的寻呼机插件都在交换<td>元素。我猜您的display:none样式只应用于您想要隐藏的当前显示的<td>，因此每当您切换到下一页时，新的<td>就会翻转，不会受到display:none函数的影响。

假设您的函数循环遍历您的<table>，并根据选中的哪个checkbox找到<td>的正确列以隐藏，那么您应该能够通过每次单击寻呼机next和previous按钮时调用隐藏适当列on click的函数来修复问题。

编辑：

您可以将Next和Prev按钮选择器添加到函数中，如下所示：

//Add .next and .prev selectors here to your click function
$("#searchContainer #toggleOptions ul li a, .next, .prev").on(

          {click: function()

                  {

                      //detect classes
                      var currentButtonCnt = $(this).parent().attr("class");
                      var currentState = $(this).attr("class");

                      //remove _btn
                      currentButton = "."+currentButtonCnt.substr(0, currentButtonCnt.length-4); 

                       var ids = [];
                      //toggle  
                      if(currentState == "ticked"){

                              $(currentButton).hide();
                              $(this).removeClass('ticked')

                      }else{

                              $(currentButton).show();  
                              $(this).addClass('ticked')

                      }

                 }

          }//end click 

    )

看起来，Tablesorter页面插件将类默认为.next和.prev。检查此处：http://tablesorter.com/docs/example-pager.html并检查按钮元素。