表排序器过滤器在表中隐藏列时未隐藏答案

【问题标题】：tablesorter filter is not hiding while hiding column in table表排序器过滤器在表中隐藏列时未隐藏
【发布时间】：2019-03-16 05:32:12
【问题描述】：

我可以在上面的复选框操作中删除列数据和标题。但是因为我正在使用 tablesorter 插件。过滤器不会隐藏和消失。它消耗了我们想为扩展表视图提供的额外空间。

请看两张图片以便更好地参考和理解？

我希望@Mottie 能提出一些解决方案。

这是我现在的结构

<table class="table table-striped" id="someussta">
          <div class="btn-cal-group pull-right">    <a href="#" id="downsta" class="btn btn-sm bg-blue">Export Results Excel</a>
          <a href="#" id="testussta" type="button" onclick="exportPDFResults();" class="btn btn-sm bg-blue">Export Results pdf</a></div>


                                        <thead>
                               <tr>   <div> <b> ** Customize Column ** </b> </div> <div id="grpChkussta">
    <p>
    <input type="checkbox" name="Dcou" /> State
    <input type="checkbox" name="sresu" /> Search Result
<input type="checkbox" name="mflag" /> Flag
<input type="checkbox" name="mcomm" /> Comment
<input type="checkbox" name="mname" /> Trademark Name
<input type="checkbox" name="mtype" />Trademark No.
  <input type="checkbox" name="mleg" /> Legal Status</p>

            </div></tr>
                          <tr>  <div id="sticky" class="sticky">
                                 <th style="width: 10px"><input type="checkbox"  id="inp-chkboxsta"></th>
                                 <!--   <th>Mark Image</th> -->
                                   <th class="Dcou">State</th>
                                 <th class="sresu">Search Result</th>
                                <th class="mflag"> Flag </th>
                                <th class="mcomm"> Comment </th>
                                <th class="mname">Trademark Name</th>
                                <th class="mtype">Trademark No.</th>
                                <th class="mleg">Legal Status</th>
                                      <!-- <th>Web link</th> -->
                        </div>         </tr>     </thead>     

                      <tbody>
                              {% for result in cat.results %}
                              <tr id="someussta" class="content">
                                <td><input type="checkbox" name="tuesday[]" data-pid="{{result.id_}}" class="inpchksta"></td>
                                <td class="Dcou">{% for state in result.designatedContractedStates %}
                                                                        {{state}}
                                                                        {% endfor %}</td>

                                <td class="sresu">{{result.trademarkType}}</td>

                             <td width="125" class="{{result.id_}}">



                  <td class="mname"><a data-toggle="modal" class="tm" data-target="#TMResultModal" data-tid="{{result.id_}}">{{result.markName}}</a></td>
                   <td class="mreg">{{ (result.registrtionNo|string).rstrip('0').rstrip('.') }}</td>
                    <td class="mleg">{{result.legalStatus}}</td>
                                <!-- <td>{{result.goodsServices}}</td> -->
                              </tr>

                                                                    {% endfor %}</tbody>
                                                            </table>

这是我用来从表格中隐藏我的列的函数。

$(function () {
        var $chk = $("#grpChkussta input:checkbox");
        var $tbl = $("#someussta");
        $chk.prop('checked', true);
        $chk.click(function () {
            var colToHide = $tbl.find("." + $(this).attr("name"));
            $(colToHide).toggle();
        });
    });

【问题讨论】：

@Mottie 我希望你能理解我面临的问题。

标签： jquery filter jquery-plugins tablesorter

【解决方案1】：

过滤器行是动态构建的，因此单元格不包含每列的名称。这可以使用filter_cellFilter option添加

$(function() {
  $("table").tablesorter({
    widgets: ["filter"],
    widgetOptions : {
      filter_cellFilter : ["Dcou", "sresu", "mflag", "mcomm", "mname", "mtype", "mleg"]
    }
  });
});

注意：

HTML 无效。将<div> 包裹在表格单元格周围可能无法在所有浏览器中按预期工作。
提供的 HTML 似乎不是针对屏幕截图中的同一个表格，因此如果您有多个带有可切换列的表格，使用column selector widget 可能更容易。也不需要命名每个表格单元格，因为小部件使用 nth-child() css 选择器来隐藏列。
还有一个sticky header widget。

【讨论】：