bootstrap-table Cannot set property 'undefined' of undefined

Question

bootstrap-table version:1.16.0

Objectives: I want to achieve the effect of table select all and multiple.

Code:

<table class="table table-bordered" id="order-table">
  <thead>
      <tr>
        <th><input type="checkbox" id="btSelectAll" name="btSelectAll" /></th>
        <th>name1</th>
        <th>name2</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="btSelectItem" data-index="586"/></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="btSelectItem" data-index="586"/></td>
      <td>val1</td>
      <td>val2</td>
    </tr>            
  </tbody>
</table>

<script type="text/javascript">
  $(function() {
    $table = $('#order-table').bootstrapTable({
      search: false,
      showColumns: false,
      multipleSelectRow: true
    });

  });
</script>

Then I click on the checkbox, which triggers the error

Question:Error in console

bootstrap-table.min.js:10 Uncaught TypeError: Cannot set property 'undefined' of undefined
    at e.value (bootstrap-table.min.js:10)
    at HTMLInputElement.<anonymous> (bootstrap-table.min.js:10)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)
value   @   bootstrap-table.min.js:10
(anonymous) @   bootstrap-table.min.js:10
dispatch    @   jquery.min.js:2
v.handle    @   jquery.min.js:2

Can someone tell me why this happens and how to solve it. Or give me the right example?

Answer 1

The issue is with your attribute data-index

You should not use data-index randomly as on checkbok check/uncheck bootstrap-table gets row of that particular index

See this fiddle, this fiddle won't give error

 https://jsfiddle.net/jdvLbwc3/1/

Also if you want to use chcekbox in your td then you should use data-checkbox attribute as shown in this link https://examples.bootstrap-table.com/#column-options/checkbox.html#view-source

Fiddle using data-checkbox attribute https://jsfiddle.net/jdvLbwc3/3/

$(function() {
  $table = $('#order-table').bootstrapTable({
    search: false,
    showColumns: false
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js></script>
<table class="table table-bordered" id="order-table">
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th>name1</th>
      <th>name2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-checkbox="true"></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
    <tr>
      <td data-checkbox="true"></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
  </tbody>
</table>