Add rowIds to checkboxes.selected
Add rowIds to checkboxes.selected
I’m using the checkboxes plugin for datatables with server side enabled. I’m trying to implement a select all by creating an array of rowIds that I get from a query and pushing them to the checkboxes selected array. This is my dataTable:
var table = $("#gameobjects").DataTable({
stateSave: true,
stateSaveParams: function ( settings, data ) {
for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
delete data.columns[i].visible;
}
},
lengthMenu: [10, 50, 100, 500, 1000],
ordering: false,
"language":
{
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
},
"bServerSide": true,
"bProcessing": true,
"sAjaxSource": "/GameObjects/GetGameObjects",
"fnServerParams": function (aoData) {
aoData.push({ "name": "uploadId", "value": @Model.Upload.ID });
aoData.push({ "name": "configurationName", "value": configurationValue });
},
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
type: "POST",
data: aoData,
url: sSource,
success: fnCallback
});
},
columns: [
{
"mData": "ObjectID",
'targets': 0,
'checkboxes': {
'selectRow': true
}
},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"className": 'details-control2',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "mData": "GameObjectName", "autoWidth": true },
{ "mData": "Category", "autoWidth": true },
{ "mData": "Family", "autoWidth": true },
{ "mData": "Type", "autoWidth": true },
{
"mData": "Visible",
"autoWidth": true,
"className": "dt-center",
render: function(data, type, row) {
if (data === false) {
return '<i class="fa fa-times"></i>'; //"No";
} else {
return '<i class="fa fa-check"></i>'; //"Yes";
}
}
},
{ "mData": "Draft", "visible": false },
{ "mData": "ID", "visible": false }
],
"rowCallback": function (row, data, index) {
if ( data["Draft"] === true )
{
$(row).addClass("stripe-3");
}
var selected = ["254", "524"]; //this array would get it's values from server side
//Push all values from selected to checkboxes.selected()
},
dom: 'lBftrip',
rowId: 'ObjectID',
select: {
style: 'multi+shift',
selector: 'td:first-child'
},
buttons: [
{
text: 'Select all',
action: function () {
}
},
{
text: 'Select none',
action: function() {
table.column().checkboxes.deselectAll();
}
},
{
text: 'Reset Filters',
action: function(e, dt, node, config) {
yadcf.exResetAllFilters($("#gameobjects").DataTable());
}
}
],
/*'order': [[3, 'desc']]*/
});
Can anyone guide me in the right direction?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You are using
rowIdto set the row ID withrowId: 'ObjectID',. You can use these IDs as therow-selectorfor therows()API. Note they need to have#to select the rows using the ID. You can then userows().select()to select all the rows with the specified ID's. See this example:http://live.datatables.net/nutuyofu/1/edit
The Select extension will only select the rows available at the client (shown on the page) when using server side processing. The Gyrocode checkboxes plugin you are using may behave differently and keep track of the selected rows not on the client. I haven't tried this with the Gryrocode solution so not sure how it will behave.
Kevin
This only works with the records on the current page. I would like to store the values in the selected array and when you select a different page, selected checks if the array contains any of the current rowIds in the table and highlights these
Take a look at using the
drawevent. Then use the method I described to select the rows on each draw.Kevin
I tried it and it did select rows, but only the ones on the first page
Here is an example with server side processing and using an array if IDs:
http://live.datatables.net/gobadeca/1/edit
You should see rows being selected on pages 1, 4 and 5. If this doesn't help then please update the test case to show the problem you are having.
Kevin
Okay, I'm not sure what's happening here. When I try your solution (in the draw event) it works, but when I use the same code in this button it only selects the record on the current page.
Thats why I use the
draw. It executes each table draw (sort, search, page) to update the row selection. Your button code will only select the rows on the current page. If, for example,#9468387is on a different page when you click the button it won't become selected when that page is shown. With server side processing you will need a way to keep track of the selected rows and use thedrawevent to reselect them each time the table is drawn.Kevin
@kthorngren your solution works. But the table displays "2 rows selected" (it should be 3). When clicking on the page where the third selected row is, it updates to 3.
So for this to work the user would have to go through each page which is not desirable.
Both of those issues are due to using server side processing. The
rows().select()API works only on the rows at the client. Do you need server side processing? See this [FAQ}(https://datatables.net/faqs/index#speed). Wonder if your table load time is acceptable if you turn it off.Kevin
Yes server side is necessary. The table has to load about 50 000 records minimum
One option is to turn off the selected rows info display with
select.info. Then use theinfoCallbackto do something similar where you report on the number of rows selected based on your rowIds variable.Kevin