Datatable checkbox in Pagination table

Asked

Viewed 933 times

1

I am making a table with Datatable and paging, but I need it to have a checkbox in each row the problem is that when I have selected all, it only selects the first page, the others have no effects.

Follow the Jquery:

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

Follows 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 jquery html paging

  • Marcos, I don’t know if it’s a duplicate, but I answered a question for the same purpose: http://answall.com/questions/26583/marcar-todos-checkbox-de-uma-tabela-datatable/32648#32648. But it seems that the OP ignored the question...

  • This method worked, but the page.dt function is not recognizing.

  • What do you mean? Generated an error? Or not being executed?

  • It does not run, the order.dt runs normally, but on page.dt it does not work

  • 2

    Strange... I did just for this case, the other events are optional. If you do not need try to take. If the error persists, try creating a Jsfiddle so I can see what happened.

  • I played my script on Jsfiddle and it worked, but on my page it does not recognize the event page.dt, it has some hint of what might be?

  • Dude, what was wrong was ',' between page.dt and order.dt, instead of $('#table'). on('page.dt, order.dt', Function () { setTimeout(toggleMarcarTodos, 1); });, I made $('#table'). on('page.dt order.dt', Function () { setTimeout(toggleMarcarTodos, 1); });

  • 1

    Hmm, good. Just take care, the function is overriding individual values. That is, if you checked the "checkbox master" and unchecked some, it overlap. Need to handle individual cases.

Show 3 more comments

1 answer

1

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

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

It would also be interesting for the same checkbox you select to also deselect 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’ve helped.

Browser other questions tagged javascript jquery html paging

You are not signed in. Login or sign up in order to post.