Checkbox conflicting with paging

Question

I’m trying to use the bootstrap-table to create some filters in a table, in the first column has a checkbox, that when a function is selected JQuery copies the column row and adds in another table, when the selection takes the row from the other table is removed.

Even then it works, but when I use the pagination (generated by bootstrap-table) the checkbox doesn’t work anymore.

Just follow my 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-height="460"
           data-click-to-select="true"
           data-pagination-first-text="Primieiro"
           data-pagination-pre-text="Anterior"
           data-pagination-next-text="Próximo"
           data-pagination-last-text="Último"
           data-filter-control="true">
        <thead>
            <tr>
                <th data-filed="select">&nbsp;</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"><input type="checkbox" class="checkbox"></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"><input type="checkbox" class="checkbox"></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"><input type="checkbox" class="checkbox"></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"><input type="checkbox" class="checkbox"></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(){
      $('#pieces tbody tr td input.checkbox:not(:checked)').on('change', 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();
        }
      });
    });

Follow jsfiddle with the code: http://jsfiddle.net/zb8aomfu/

If anyone knows what the bug is, or how to use bootstrap-table natively I really appreciate it.

Answer 1

The problem is this.

On that line of your code

$('#pieces tbody tr td input.checkbox:not(:checked)').on('change', function (e) {....

You are creating the event change system of the present checkboxes of your DOM document. However, due to the pagination, the paged elements are not present in the DOM at the time of creation of the Library, so taking out all the items on the home page of your table, the demias will not respond to the change event.

The solution is to create the document and not in the item, listening to every change event of a particular item, but the Switch (which is the Rigger of the event) is in the document and not in the visible elements.

That is the solution:

  $(document).on('change', '#pieces tbody tr td input.checkbox', function (e) {
console.log('aasdasdsa');
      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();
    }
  });