CODEWITHSUNDEEP
javascriptjquerycheckboxtablesorter
Robyn Darley
Robyn Darley

Reputation: 33

The column sort in my tablesorter is overriding the checkall check box in my table header

I'm using the jQuery-2.1.3 version, and applied the jQuery tablesorter to a table to each column heading. My table also has checkboxes, and I need to be able to checkall the checkboxes in the first column. The function I'm using does correctly checkall, but also sorts the table. I am also not able to uncheckall, instead the column just toggles between ascending/descending order.

Here is a link to view my example: 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>

Here's the JavaScript I was using 

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

Upvotes: 3

Views: 1277

Answers (3)

Mottie
Mottie

Reputation: 86453

I think all that is missing is to stop propagation of the click:

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

Upvotes: 4

Leon Gaban
Leon Gaban

Reputation: 39044

Another way to do this, albeit un-semantically is to position the main checkbox outside the table, then reposition over the table head.

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

Then the CSS

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

Upvotes: 0

Austin Mullins
Austin Mullins

Reputation: 7437

The problem is that the checkbox is part of the column header, so anytime the header is clicked, the checkbox's click handler runs. The first solution off the top of my head is pull the checkboxes into their own column. This makes the checkboxes their own sortable column, which is unfortunate, but there's a configuration option in .tablesorter that allows you to ignore the checkbox field:

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

See my fiddle for a full example. The basic gist is:

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

  ...

Upvotes: 0

Related Questions