Checkbox status

Question

Hello,

This code does the following, when the checkbox is selected, the table row is added in the bottom table.

If I create the input.checkbox in hand the code works but does not save its status when using paging, using the checkbox generated by bootstrap-table it saves the status when using paging but my javascript does not find the checkbox.

Here the fiddle: https://jsfiddle.net/zc2v3yg3/

Here the code:

Note: You have to import bootstrap, bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/) and jquery

HTML:

<table id="pieces" data-toggle="table" data-page-size="2" data-page-list="[2,5,10,20,40,80,100]" data-pagination="true" data-id-field="id" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-filed="select"   data-checkbox="true"></th>
      <th data-filed="id"       data-sortable="true">#</th>
      <th data-field="kind"     data-sortable="true" data-filter-control="select">Tipo</th>
      <th data-field="group"    data-sortable="true" data-filter-control="select">Grupo</th>
      <th data-field="gender"   data-sortable="true" data-filter-control="select">Gênero</th>
      <th data-field="size"     data-sortable="true" data-filter-control="select">Tamanho</th>
      <th data-field="color"    data-sortable="true" data-filter-control="select">Cor</th>
      <th data-field="used"     data-sortable="true" data-filter-control="select">Usado</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td id="select"></td>
      <td>0001</td>
      <td>Camisa</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="2">
      <td id="select"></td>
      <td>0002</td>
      <td>Calça</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="3">
      <td id="select"></td>
      <td>0003</td>
      <td>Cinto</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
    <tr id="4">
      <td id="select"></td>
      <td>0004</td>
      <td>Sapato</td>
      <td>Atendimento</td>
      <td>Masculino</td>
      <td>M</td>
      <td>Azul</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<hr>
<table id="piecesToEmployer" class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Tipo</th>
      <th>Grupo</th>
      <th>Gênero</th>
      <th>Tamanho</th>
      <th>Cor</th>
      <th>Usado</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JS:

$(document).ready(function(){
  $(document).on('change', '#pieces tbody tr td input.checkbox', function (e) {
    if($(this).is(':checked')){
      var row = $(this).closest('tr').clone();
      console.log(row);
      $('#piecesToEmployer tbody').append(row);
      $('#piecesToEmployer tbody #select').remove();
    } else {
      var rmRow = $(this).closest('tr').attr('id');
      console.log(rmRow);
      $('#piecesToEmployer #'+rmRow).remove();
    }
  });
});

Answer 1

Use the bootstrap-table’s own functions to catch onCheck() and onUncheck(), this way will work normally with paging. Ai just do your ajax to save your status. See the fiddle!

First caught the event of onCheck:

$('#pieces').on('check.bs.table', function (row, event, element) {
    var row = $(element).closest('tr').clone();
    $('#piecesToEmployer tbody').append(row);
    $('#piecesToEmployer tbody #select').remove();

    //aqui você chama seu ajax para salvar
});

Then take the event of unCheck:

$('#pieces').on('uncheck.bs.table', function (row, event, element) {
    var rmRow = $(element).closest('tr').attr('id');
    $('#piecesToEmployer #' + rmRow).remove();

    //aqui você chama seu ajax para remover
});