0

Estou tentando utilizar o bootstrap-table para criar alguns filtros em uma tabela, na primeira coluna tem um checkbox, que quando selecionado uma função JQuery copia a linha da coluna e adiciona em outra tabela, quando tira a seleção a linha da outra tabela é removida.

Até ai funciona, porem quando eu utilizo a paginação (gerada pelo bootstrap-table) o checkbox não funciona mais.

Segue o meu código:

Obs.: Tem que importar o bootstrap, bootstrap-table (http://bootstrap-table.wenzhixin.net.cn/) e 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();
        }
      });
    });

Segue o jsfiddle com o código: http://jsfiddle.net/zb8aomfu/

Se alguém souber qual o erro, ou como usar nativo do bootstrap-table eu agradeço muito.

1
  • Poste o trecho do código aqui também, para facilitar a análise do pessoal.
    – user28595
    Commented 1/10/2015 às 13:16

1 Resposta 1

1

O problema é o seguinte.

Nessa linha do seu código

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

Você está criando o listener do evento change dos checkboxs presentes do seu documento DOM. Porém por conta da paginação os elementos paginados não estão presentes no DOM no momento de criação do listener, por isso tirando todos os itens da página inicial da sua tabela, os demias não responderão ao evento de change.

A solução é criar o listener no documento e não no item, escutando a todo evento change de determinado item, porém o listener (que é a trigger do evento) está no documento e não nos elementos visíveis.

Essa é a solução:

  $(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();
    }
  });
1
  • Erick Gallani, muito boa sua resposta, ainda me ensinou alguma coisa sobre DOM. Para manter os check-boxes selecionado enquanto se usa a paginação como seria? Commented 1/10/2015 às 15:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .