tablesorter filter is not hiding while hiding column in table

Question

i am able to remove the column data and header on checkbox action above. But as i am using tablesorter plugin . the filters are not hiding and going away. it is consuming extra space which we want to provide for the extend table view.

please take a look at two images to get a better reference and understanding?

i am hoping @Mottie will come up with some solution .

here is my present structure

<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> 

Here is the function that i am using to hide my column from 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

The filter row is built dynamically, so the cells do not include the name of each column. This can be added using the filter_cellFilter option

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

Note:

• The HTML is not valid. Wrapping a <div> around table cells may not work predictably in all browsers.
• The HTML provided doesn't appear to be for the same table in the screenshots, so if you have multiple tables with togglable columns, it might be easier to use the column selector widget. It also wouldn't be necessary to name every table cell because the widget using nth-child() css selectors to hide the columns.
• There is also a sticky header widget.