фильтр таблиц не скрывается при скрытии столбца в таблице - PullRequest
Новая
       42

фильтр таблиц не скрывается при скрытии столбца в таблице

0 голосов
/ 11 октября 2018

Я могу удалить данные столбца и заголовок на действие флажок выше.Но, как я использую плагин TableSorter.фильтры не прячутся и не уходят.он потребляет дополнительное пространство, которое мы хотим выделить для расширенного представления таблицы.

пожалуйста, взгляните на два изображения, чтобы получить лучшую справку и понимание?

enter image description here

enter image description here

Я надеюсь, что @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();
        });
    });

1 Ответ

0 голосов
/ 11 октября 2018

Строка фильтра строится динамически, поэтому в ячейки не входит имя каждого столбца.Это можно добавить с помощью опции filter_cellFilter 

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

Примечание:

  • HTML-код недействителен.Обтекание <div> вокруг ячеек таблицы может не работать предсказуемо во всех браузерах.
  • Предоставленный HTML-код не соответствует одной и той же таблице на снимках экрана, поэтому если у вас несколько таблиц с переключаемыми столбцами, онможет быть проще использовать виджет селектора столбцов .Также нет необходимости называть каждую ячейку таблицы, потому что виджет использует nth-child() css-селекторы, чтобы скрыть столбцы.
  • Существует также виджет липкого заголовка .
...