1

我正在使用 tablesorting 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 

    )
4

1 回答 1

0

<td>每次您为每行/列切换页面时，Tablesorter 的分页器插件似乎都会交换元素。我猜你的display:none样式只适用于<td>你想要隐藏的当前显示的，所以每当你翻到下一页时，新的都会<td>被翻过来，并且不受你的display:none功能的影响。

假设您的函数循环通过您并根据选中的选项<table>找到要隐藏的正确列，您应该能够通过调用您的函数来解决您的问题，该函数每次单击分页器的下一个和上一个按钮时都会隐藏相应的列。<td>checkboxon 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并检查按钮元素。

于 2013-07-29T14:07:30.633 回答