Add rowIds to checkboxes.selected

Cedkam

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?

kthorngren

You are using rowId to set the row ID with rowId: 'ObjectID',. You can use these IDs as the row-selector for the rows() API. Note they need to have # to select the rows using the ID. You can then use rows().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

Cedkam

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

kthorngren

Take a look at using the draw event. Then use the method I described to select the rows on each draw.

Kevin

Cedkam

I tried it and it did select rows, but only the ones on the first page

kthorngren

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

Cedkam

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.

buttons: [
                    {
                        text: 'Select all',
                        action: function () {
                            var rowIds = ['#12831693', '#9468387'];
                            table.rows(rowIds).select();

                            console.log("select this row");
                        }
                    },

kthorngren

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, #9468387 is 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 the draw event to reselect them each time the table is drawn.

Kevin

Cedkam

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

Cedkam

So for this to work the user would have to go through each page which is not desirable.

kthorngren

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

Cedkam

Yes server side is necessary. The table has to load about 50 000 records minimum

kthorngren

One option is to turn off the selected rows info display with select.info. Then use the infoCallback to do something similar where you report on the number of rows selected based on your rowIds variable.

Kevin