table排序过滤器在隐藏 table 中的列时未隐藏

Question

我能够删除列数据和 header 上面的复选框操作。但是因为我正在使用 tablesorter 插件。过滤器没有隐藏和消失。它正在消耗额外的 space，我们希望为扩展 table 视图提供这些。

请看两张图片以获得更好的参考和理解？

我希望@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>

这是我用来隐藏我的专栏的函数 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();
        });
    });

Answer 1

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

添加

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

注：

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

table排序过滤器在隐藏 table 中的列时未隐藏

tablesorter filter is not hiding while hiding column in table

jquery

tablesorter

filter

jquery-plugins