Checkbox with DataTable in table with Paging

Question

Checkbox with DataTable in table with Paging

Navigation

#1 by (1 votes)

1

I'm doing a table with DataTable and paging, but I need it to have a checkbox on each line. The problem is that when I have to select all, it only selects the first page, the other ones do not take effect.

Follow Jquery:

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

Follow the 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>

javascript html jquery jquery-datatables

asked by anonymous 18.09.2014 / 20:01

1 answer

JSF accessing serial port Problems with types and conversions when filling a page

score 1 · Answer 1

In DataTables when creating a checkbox that selects all you must pass as parameter to jQuery the selector ( 'tbody tr td input[type="checkbox"]' ) and context (ex. dataTables.fnGetNodes() ). Context is not required because uses the entire document as default, but in the case of DataTables, it removes the other pages of the DOM. So you should pass all the context the nodes using the .fnGetNodes() method.

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

It would also be interesting if the same checkbox you select also unchecked all. To do this, create a variable and pass as parameter to the function attr

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

I hope I have helped.