Checkbox with Select All - Datatables
Checkbox with Select All - Datatables
thiagoemanoel
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 ?
This discussion has been closed.
Replies
Start by adding these lines to your checkbox column:
Also you can remove the
'targets':0,as its not used in thecolumnsoption.Kevin
Krthorngren i put like this :
the error dissapear , but when i click on another page , all the checkbox are checked .
You are using the Gyrocode checkboxes plugin. The Overview page has this note:
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
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 ?
Try removing
data: nulland leavedefaultContent: ''. 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
Hey kt i change to this
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
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
@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.
@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
drawevent to update the checkboxes on the page appropriately usingrows().select()orrows().deselect().Kevin
@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.