Сортировка столбцов в моем tablesorter переопределяет checkall в моем заголовке таблицы

Question

Я использую версию jQuery-2.1.3 и применяю таблицу jQuery tablesorter к таблице для каждого заголовка столбца. В моей таблице также есть флажки, и мне нужно иметь возможность проверять флажки в первом столбце. Функция, которую я использую, корректно проверяет, но также сортирует таблицу. Я также не могу снять флажок, вместо этого столбец просто переключается между восходящим/убывающим порядком.

Вот ссылка, чтобы посмотреть мой пример: http://bitalicious.co/robyn/

<fieldset> 
<table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
     <th> 
     <div class="checkbox"> 
      <label> 
      <!-- checkall is not currentlly working --> 
      <input type="checkbox" class="checkall">Business Name 
      </label> 
     </div> 
     </th> 
     <th>Contact Name</th> 
     <th>Address</th> 
     <th>City</th> 
     <th>State</th> 
     <th class="{sorter: false}"></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox">ABC Corporation 
      </label> 
     </div> 
     </td> 
     <td>Brandon</td> 
     <td>290 Plano Pkwy</td> 
     <td>Plano</td> 
     <td>TX</td> 
     <td> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
      Modify <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Edit</a> 
      </li> 
      <li><a href="#">Duplicate</a> 
      </li> 
      <li><a href="#">Delete</a> 
      </li> 
      </ul> 
     </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox">Jungle Crabs 
      </label> 
     </div> 
     </td> 
     <td>Robyn</td> 
     <td>511 Fort Worth Dr</td> 
     <td>Denton</td> 
     <td>TX</td> 
     <td> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
      Modify <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Edit</a> 
      </li> 
      <li><a href="#">Duplicate</a> 
      </li> 
      <li><a href="#">Delete</a> 
      </li> 
      </ul> 
     </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox">Big Plates Restaurants 
      </label> 
     </div> 
     </td> 
     <td>Justin</td> 
     <td>1329 Centrury Blvd</td> 
     <td>Irving</td> 
     <td>TX</td> 
     <td> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
      Modify <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Edit</a> 
      </li> 
      <li><a href="#">Duplicate</a> 
      </li> 
      <li><a href="#">Delete</a> 
      </li> 
      </ul> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Вот JavaScript я использовал

<!-- jQuery Tablesorter --> 
<script src="js/jquery.tablesorter.min.js"></script> 
<script src="js/jquery.metadata.js"></script> 
<script type=""> 
    $(document).ready(function() 
     { 
      $("#myTable").tablesorter(); 
     } 
    ); 
</script> 

<!-- Check all column header currently conflicting with the column sort --> 
<!-- refer to site http://briancray.com/posts/check-all-jquery-javascript --> 
<script type="text/javascript"> 
    $(function() { 
     $('.checkall').on('click', function() { 
      $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); 
     }); 
    }); 
</script> 

Answer 1

Я думаю, что все, что не хватает, чтобы остановить распространение щелчку:

$('.checkall').on('click', function (e) { 
    e.stopPropagation(); 
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); 
}); 

Answer 2

Проблема заключается в том, что флажок является частью заголовок столбца, поэтому при каждом щелчке заголовка запускается обработчик кликов. Первое решение от верхней части моей головы - поместить флажки в свою колонку. Это делает Флажки свой собственный Сортируемый столбец, который неудачно, но есть вариант конфигурации в .tablesorter, что позволяет игнорировать поле флажка:

$("#myTable").tablesorter({ 
    headers: { 
     0: { sorter: false, parser: false } 
    } 
}); 

См my fiddle для полного примера. Основная суть заключается:

<fieldset> 
<table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
     <th> 
     <div class="checkbox"> 
      <input type="checkbox" class="checkall"/> 
     </div> 
     </th> 
     <th>Business Name</th> 
     <th>Contact Name</th> 
    ... 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="checkbox"> 
      <input type="checkbox"/> 
     </div> 
     </td> 
     <td>ABC Corporation</td> 
     <td>Brandon</td> 

    ... 

Answer 3

Другим способом сделать это, хотя и не-семантически является положение основного флажка вне таблицы, а затем переставить над головой таблицы.

<div class="checkbox checkbox-boss"> 
    <label> 
     <!-- checkall is not currentlly working --> 
     <input type="checkbox" class="checkall"> Business Name 
    </label> 
</div> 

<table id="myTable" class="tablesorter"> 
    <thead> 
     <tr> 
      <th> 

      </th> 
      <th>Contact Name</th> 
      <th>Address</th> 
      <th>City</th> 
      <th>State</th> 
      <th class="{sorter: false}"></th> 
     </tr> 
    </thead> 
    <tbody> 

Тогда CSS

.checkbox-boss { 
    position: relative; 
    top: 42px; 
    left: 12px; 
    width: 100px; 
    background: red; 
}