Add rowIds to checkboxes.selected

Add rowIds to checkboxes.selected

CedkamCedkam Posts: 7Questions: 1Answers: 0
edited May 2021 in Select

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

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited May 2021

    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

  • CedkamCedkam Posts: 7Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

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

    Kevin

  • CedkamCedkam Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited May 2021

    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

  • CedkamCedkam Posts: 7Questions: 1Answers: 0
    edited May 2021

    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");
                            }
                        },
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

  • CedkamCedkam Posts: 7Questions: 1Answers: 0
    edited May 2021

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

  • CedkamCedkam Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • CedkamCedkam Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

This discussion has been closed.