Checkbox Conflicting with Paging

Question

Checkbox Conflicting with Paging

Navigation

#1 by (1 votes)

0

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

So far, it works, but when I use pagination (generated by bootstrap-table ) checkbox does not work anymore.

Here is my code:

Note: You have to import the bootstrap, bootstrap-table ( link ) 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 the jsfiddle with the code: link

If anyone knows the error, or how to use native bootstrap-table I thank you very much.

javascript jquery twitter-bootstrap

asked by anonymous 01.10.2015 / 15:11

1 answer

How to show data coming from the bank in a Highcharts chart in ASP NET MVC Update does not update

score 1 · Accepted Answer

The problem is as follows.

In this line of your code

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

You are creating the event change listener for the checkboxes present in your DOM document. However because of the pagination paged elements are not present in the DOM at the time of creating the listener, so by removing all items from the home page of your table, the daemons will not respond to the change event.

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

That's 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();
    }
  });