Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using checkbox and sortable on same column sorts when click on checkAll checkbox

See original GitHub issue

Using checkbox and sortable on same column sorts when you click on the checkAll checkbox. I would expect for sorting not to be affected when you click the checkAll checkbox. If you click on the checkAll button instead of the checkbox, the problem does not occur.

With pagination the problem is much more obvious because the checked rows seem to disappear when you click the selectAll checkbox.

Reproduced with the Online Editor on Chrome Version 78.0.3904.87 on Windows 10 with the following setup:

<div id="toolbar">
  <button id="button" class="btn btn-secondary">checkAll</button>
  <button id="button2" class="btn btn-secondary">uncheckAll</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-url="json/data1.json"
  data-pagination="true"
  data-page-size="5">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true" data-sortable="true" ></th>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')
  var $button2 = $('#button2')

  $(function() {
    $button.click(function () {
      $table.bootstrapTable('checkAll')
    })
    $button2.click(function () {
      $table.bootstrapTable('uncheckAll')
    })
  })
</script>

To prevent this, I did the following:

        $('input[name="btSelectAll"]').off('click').on("click", (function(e) {
        let checked = $(this).prop("checked");
        $table.bootstrapTable(checked ? "checkAll" : "uncheckAll");
        e.stopPropagation();
        }));