Checkbox with Select All - Datatables

thiagoemanoel

Hi guys , i'm using laravel and i'm using Datables instead Footable , but looks.

i created a table like this

         <table id="example" class="datatable table-responsive w-auto table table-stripped m-b-xs toggle-arrow-tiny">
                        <thead>
                            <tr>
                               <th></th>
                                <th></th>
                                <th data-hide="phone">ID.</th>
                                <th data-hide="false">DATE</th>
                                <th data-toogle="true">FRUIT</th>
                                <th data-hide="phone">BOXES</th>
                                <th>OPERATION</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>

on my Document.ready i have this function

var table= $('.datatable').DataTable({

        'processing': true,
        'serverSide': true,
        'ajax': '{{ route('generateData.ajax') }}',
        'columns': [{
            'targets':0,
            'checkboxes':{
                'selectRow':true
            }
        },
            {
                'class':'details-control', 
                'orderable':      false,
                'data':           null,
                'defaultContent': ''
            },
            { data: 'status_db',
                'searchable': false,
                'orderable':false,
                'render': function (data, type, row) {


                    if(row.status_db==1){
                        return '<button>Do it</button>';
                    } else{
                        return '<button>Dont</button>';
                    }

                }
            },
            { data: 'date'},
            { data: 'name_product'},
            { data: 'total'},
            { data: 'action', orderable: false, searchable: false},
        ]
    });
    $('#example tbody').on('click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if (row.child.isShown()) {
            // This row is already open - close it.
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open row.
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });

this populate my table with the datas from ajax request , but return me a error

"DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

i have found some examples using "ColumnDefs , but i wanna use Columns .

someone could help me ?

kthorngren

Start by adding these lines to your checkbox column:

            'data': null,
            'defaultContent': ''

Also you can remove the 'targets':0, as its not used in the columns option.

Kevin

thiagoemanoel

Krthorngren i put like this :

'columns': [{
                'data':null,
                'defaultContent':'',
                'checkboxes':{


                    'selectRow':true
                }
            }, .... 

the error dissapear , but when i click on another page , all the checkbox are checked .

kthorngren

You are using the Gyrocode checkboxes plugin. The Overview page has this note:

Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior.

That could be the unexpected behavior. You will need to check with the plugin's developer though.

Here is the Plugin's server side example which seems to work.

You will need to contact the plugin developer for support. However if you want to provide a link to your page or a test case showing the issue we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can find server side scripts to start from here:
https://datatables.net/manual/tech-notes/9#Server-side-processing

Kevin

thiagoemanoel

Thanks my , about this

"Column containing checkboxes must have unique data. Using columns.data option set to null for the column containing checkboxes will result in unexpected behavior."

and if i put a variable to the checkbox value , like "data:id" ( data id could be the id on my database relative to this row ) what u think ?

kthorngren

Try removing data: null and leave defaultContent: ''. If this doesn't help the best bet is to ask the plugin developer to find out the best way to handle server side with objects.

Or build an example that we can help with.

Kevin

thiagoemanoel

Hey kt i change to this

{
                 data:'id',
                'checkboxes':{

                    'selectRow':true
                },

            }

and worked , now i just wanna see if is possible select all checkbox in all pages , because he is selecting all only in current page

kthorngren

Taking a look at the Gyrocode checkboxes plugin support I found this:

https://github.com/gyrocode/jquery-datatables-checkboxes/issues/74

Please try the suggested solution. If this doesn't work then open a new issue for the plugin.

Kevin

gyrocode

@kthorngren @thiagoemanoel Currently plug-in doesn't support selecting all checkboxes on all pages in server-side processing mode because this requires support from the server-side script. See this thread for more details.

From the usability perspective it may make sense to allow only current page selection especially if selection results in destructive operation such as deleting. Look at how Gmail allows select emails on current page only.

@kthorngren Thank you for your support.

kthorngren

@gyrocode Maybe I misread your comment in this issue about using the latest version of the plugin for this. It does make sense that each page isn't reselected. Its a cool plugin BTW

@thiagoemanoel If this is a requirement for you then you could write some code to keep track of the select all checkbox and use the draw event to update the checkboxes on the page appropriately using rows().select() or rows().deselect().

Kevin

gyrocode

@kthorngren Thanks! The issue you have mentioned refers to retrieving selected data from multiple pages when using server-side processing mode (i.e. when you select some checkboxes on page 1, go to page 2 and select some checkboxes and then want to retrieve your selection). What OP wanted is to be able to select all checkboxes on all pages by clicking on "Select All" checkbox which is not currently supported.