1

Estou fazendo uma tabela com DataTable e paginação, mas preciso que ela possua um checkbox em cada linha o problema é que quando eu mando selecionar todos, ele só seleciona a primeira página, as outras não surtem efeitos.

Segue o Jquery:

$('#selectAll').change(function () {
    $('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

Segue o html:

<table id="tabela">
        <thead>
            <tr class="header-row">
                <th><input type="checkbox" id="selectAll"><br></th>
                <th>Matrícula</th>
                <th>Categoria</th>
                <th>Nome</th>
                <th>Email</th>
                <th>Núcleo</th>
                <th>Cidade</th>
                <th>Estado</th>
                <th>Data de Incriçao</th>
                <th>Documento</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach ( $associados as $key => $associado)
            <tr>
                <td><input type="checkbox" value="{{$associado->code}}" name="id[]" class="cinput"><br></td>
                <td>{{$associado->code}}</td>
                <td>{{$associado->categoria}}</td>
                <td>
                    <a href='{{URL::to("/partners/edit/$associado->id")}}'>
                        {{$associado->username}}
                    </a>
                </td>
                <td>{{$associado->email}}</td>
                <td>{{$associado->nucleo}}</td>
                <td>{{$associado->city}}</td>
                <td>{{$associado->estado}}</td>
                <td>{{date('d/m/Y', strtotime($associado->created_at))}}</td>
                <td>
                    @if($associado->group_id == 1)
                        @if($associado->situacao == 1)
                            Aprovado
                        @elseif($associado->situacao == 2)
                            Pendente
                        @elseif($associado->situacao == 3)
                            Não Aprovado
                        @else

                        @endif
                    @else

                    @endif
                </td>
                <td>
                    @if($associado->quite == 1)
                        Quite
                    @elseif($associado->quite == 2)
                        Não Quite
                    @else
                        Excluído
                    @endif
                </td>
            </tr>

            @endforeach

        </tbody>
    </table>
8
  • Marcos, não sei é uma duplicata, mas respondi uma pergunta com esse mesmo propósito: pt.stackoverflow.com/questions/26583/…. Mas parece que o OP ignorou a pergunta...
    – Wakim
    Commented 18/09/2014 às 18:03
  • Esse método funcionou, porém a função page.dt não está reconhecendo. Commented 18/09/2014 às 18:58
  • Como assim? Gerou algum erro? Ou não esta sendo executada?
    – Wakim
    Commented 18/09/2014 às 19:00
  • 2
    Estranho... Eu fiz justamente para esse caso, os demais eventos são opcionais. Se não precisar tente tirar. Se persistir o erro, tente criar um JSFiddle para que eu possa olhar o que houve.
    – Wakim
    Commented 18/09/2014 às 19:05
  • 1
    Hmm, bom. Só tome um cuidado, a função está sobrepondo os valores individuais. Isso é, se vc marcou o "checkbox mestre" e desmarcou algum, ele sobrepõem. Precisa tratar os casos individuais.
    – Wakim
    Commented 18/09/2014 às 19:39

1 Resposta 1

1

No DataTables ao criar um checkbox que seleciona todos você deve passar como parâmetro para o jQuery o seletor ('tbody tr td input[type="checkbox"]') e contexto (ex. dataTables.fnGetNodes()). O contexto não é obrigatório pois usa o documento inteiro como padrão, mas no caso do DataTables, ele remove as outras páginas do DOM. Sendo assim você deveria passar como contexto todos os nós usando o método .fnGetNodes().

$('#selectAll').change(function () { $('tbody tr td input[type="checkbox"]', dataTables.fnGetNodes()).attr('checked','checked'); });

Seria interessante também que o mesmo checkbox que seleciona também desmarcasse todos. Para isso crie uma variável e passe como parâmetro para a função attr

$('#selectAll').click(function () { var selecionar = $(this).prop("checked"); $('tbody tr td input[type="checkbox"]', dataTables.fnGetNodes()).attr('checked', selecionar); });

Espero ter ajudado.

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 .