How to Post Value/s from a table with CheckBox

Sageis1

Okay this is the last of my series of dicussions on checkboxes and expandable rows.

first one: ( https://datatables.net/forums/discussion/67087/detailed-expandable-rows#latest )
second one: ( https://datatables.net/forums/discussion/67099/how-to-add-checkbox-to-expandable-rows#latest )

For my Last request i would Like to do 3 things. The Test Case : ( http://live.datatables.net/weluyanu/2/edit ) Added listA

(1) Add a button to the top of the table to toggle selection of all values in the table.

(2) How to Post all the selected values from the table

(3) This one is gonna be quite abstract but here goes, Lets say I have a table with 1- 10 values being represented by the check boxes on the table, lets say I'm given 'listA' that contains certain values from that 1- 10 represented in the table, how do i only 'check' the boxed in the table whose values exist in 'listA'.

This is my current Javascript from my project:

 var table = $("#datatables").DataTable({
                        "data": data,
                        "pagingType": "full_numbers",
                        "lengthMenu": [
                            [10, 25, 50, -1],
                            [10, 25, 50, "All"]
                        ],
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search records",
                        },
                        "columns": [
                            {
                                orderable: false,
                                className: '',
                                defaultContent: '<div class="form-check">' +
                                    '<label class="form-check-label">' +
                                    '<input class="form-check-input" type="checkbox" value="">' +
                                    '<span class="form-check-sign"><span class="check"></span>' +
                                    '</span>' +
                                    '</label>' +
                                    '</div>',
                                data: null,
                                title: '',
                                width: 100
                            },
                            {
                                data: "accessRightName",
                            },
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": '',
                                width: 10
                            },
                        ],
                        select: {
                            style: 'os',
                            selector: 'td:first-child'
                        },
                    });

This is the HTML from my project::

<form>
                            <div class="card-body">
                                <div class="material-datatables">
                                    <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Access Right Name</th>
                                                <th></th>

                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th></th>
                                                <th>Access Right Name</th>
                                                <th></th>

                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer justify-content-center">
                                <button type="submit" class="btn btn-fill btn-rose">Submit</button>
                            </div>
                        </form>

kthorngren

Add a button to the top of the table to toggle selection of all values in the table.

The easiest way is to use the Gyrocode checkboxes plugin. Or you can look on the forum as there are others who have done the same with just using Select. Like this example from this thread.

How to Post all the selected values from the table

This example shows how to get the selected rows.

This one is gonna be quite abstract but here goes, Lets say I have a table with 1- 10 values being represented by the check boxes on the table

One option is to use rows().every() to loop all the rows and if it meets the criteria use row().select() to select the row. Another is to use rows().indexes() to get the indexes of the rows that meet the criteria. Then use the indexes with the rows().select() API. Use the row-selector as a function to choose the rows.

Kevin

Sageis1

@kthorngren Im having a bit of an issue outputting the selected row, Here is the test case, http://live.datatables.net/weluyanu/11/edit

kthorngren

You are getting this error:

Uncaught ReferenceError: Console is not defined

You capitalized the C in console. It should be lower case, like this:
http://live.datatables.net/weluyanu/12/edit

Kevin

Sageis1

Hello @kthorngren , currently I have gotten the Indicies of the rows that need to be 'Checked', but im not sure how to go about it. Im trying to use the second method you mentioned, im just not sure how to use the selector function.

Here is the test case: http://live.datatables.net/weluyanu/24/edit

kthorngren

Take a look at the row-selector docs to see all the options you have. An integer is interpreted as the row index. You can pass an array of all the options. Since you have an array of indexes just use that as the row-selector, for example:

table.rows( indicies ).select();

See the updated example:
http://live.datatables.net/weluyanu/25/edit

Kevin

Sageis1

ohh thats what i needed, okay @kthorngren i just noticed that im selecting rows by their index, im actually suppose to be selecting rows by the checkbox values i.e value 1 will be the first row, not the second row.

Im guessing i have to add a criteria on the rows().indexes(), not particularly sure how to do this.

Here the test case http://live.datatables.net/weluyanu/28/edit

kthorngren

As I mentioned you can use rows().every() to loop the rows to see if the row data matches the condition. In this case it sounds like you want to check you array position 0 against the array listA. See this example:
http://live.datatables.net/weluyanu/30/edit

Kevin

Sageis1

Perfect, An with that i Thank you for all you have done to help, extremely help. Very much appreciated.

Thanks.