Checkbox with Select All - Datatables

Checkbox with Select All - Datatables

thiagoemanoelthiagoemanoel Posts: 6Questions: 1Answers: 0

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 ?

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited September 2020

    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

  • thiagoemanoelthiagoemanoel Posts: 6Questions: 1Answers: 0

    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 .

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • thiagoemanoelthiagoemanoel Posts: 6Questions: 1Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • thiagoemanoelthiagoemanoel Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • gyrocodegyrocode Posts: 126Questions: 6Answers: 30

    @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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    @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 :smile:

    @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

  • gyrocodegyrocode Posts: 126Questions: 6Answers: 30

    @kthorngren Thanks! :smile: 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.

This discussion has been closed.