Olá,
Esse código faz o seguinte, quando o checkbox é selecionado, a linha da tabela é adicionada na tabela de baixo.
Se eu criar o input.checkbox na mão o código funciona mas não salva o seu status quando se usa a paginação, usando o checkbox gerado pelo bootstrap-table ele salva o status ao usar a paginação porem o meu javascript não encontra o checkbox.
Aqui o fiddle: https://jsfiddle.net/zc2v3yg3/
Aqui o 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-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();
}
});
});
$.post()