How to Add Checkbox to Expandable Rows

Sageis1

Recently I went through this forum and got my datatable to use expand-ability functionality ( https://datatables.net/forums/discussion/67087/detailed-expandable-rows#latest ) This is the original Question.

Now I would Like to Add Check boxes to the table, not to the expanded section of the table. Also with the ability to post any selected data from the checkbox like so ( https://jsfiddle.net/gyrocode/snqw56dw/ )

This is the current Javascript I ve add columnDefs and select to try and introduce a checkbox, and ive also commented out the field i would like to be used as for check box values in the columns section ( "//{ "data": "accessRightId" }," ).

 $(document).ready(function () {
            //call the action method and get the data.
            $.ajax({
                url: "/User/RetriveRights",
                type: "Get",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log("succsss" + data);
                    //after getting the data, bind the DataTable.
                    var table = $("#datatables").DataTable({
                        'columnDefs': [
                            {
                                'targets': 1,
                                'checkboxes': {
                                    'selectRow': true
                                }
                            }
                        ],
                        'select': {
                            'style': 'multi'
                        },
                        "pagingType": "full_numbers",
                        "lengthMenu": [
                            [10, 25, 50, -1],
                            [10, 25, 50, "All"]
                        ],
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search records",
                        },
                        "data": data,
                        "columns": [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                            //{ "data": "accessRightId" },
                            { "data": "accessRightName" },
                        ],
                    });

                    //Expand/Collapse the nested objects.
                    $('#datatables tbody').on('click', '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 this row
                            row.child(format(row.data())).show();
                            tr.addClass('shown');
                        }
                    });
                },
                error: function (ex) {
                    console.log(ex);
                }
            });
        });

This is the Html:

<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>
                                        </tr>
                                    </thead>

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

And this is the structure of the data:

[
"1",
"ViewAllUsers",
"User can View All Users"
]

kthorngren

Are you having a problem with this code?

If you need help with something please build a test case showing the issue so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Sageis1

okay ill do just that @kthorngren .

Sageis1

Okay @kthorngren ive made a test case ( http://live.datatables.net/xovoreyu/9/edit )

what i want to accomplish is this exact functionality ( https://jsfiddle.net/gyrocode/snqw56dw/ )

kthorngren

I added the Select Extension to your example and used this select checkbox example to your test case:
http://live.datatables.net/resokuwa/1/edit

Using array data with Datatables is a bit tricky but you can use columns.data to define the array positions for each column. Also you will need to use data: null and defaultContent for the checkbox column.

The fiddle example you linked to uses the Gyrocode select checkboxes plugin. You can add the plugin if you want to use the features from this plugin.

Kevin

Sageis1

Duplicate Post.

Sageis1

Thanks so Much @kthorngren , really helpful.

Okay I have few final questions, so far thanks for the help, very insightful of how datatables work.

from this test case( http://live.datatables.net/xovoreyu/11/edit ) I have made a few changes.

(1) When selecting the checkbox i want to be selecting the Id value which is data: 0, i made a mistake with the previous test case, is the changes i made fine, or does it need more work.
(2) I don't want to display the id column, but i want it to be select-able via the check box, is that possible.
(3) The graphic for the expansion of rows( the plus sign), is it possible to move it to the end of each individual row, instead of the beginning.

kthorngren

The answer to all of your questions is yes

See this updated example:
http://live.datatables.net/jumopewi/1/edit

You don't have to display the row data in a column to have access to it. I added the select event, as shown in the example, to display the row id when selected. Moved the child row column to the last column. Also changed the select.selector to be the fist column.

Kevin

Sageis1

Thanks so much, you have been extremely help yesterday and today, thanks.

Sageis1

Hello once again @kthorngren, Im having issue once again, the test case conversion into a ajax call is giving me issue.

This is the Javascript

 $(document).ready(function () {
            //call the action method and get the data.
            $.ajax({
                url: "/User/RetriveRights",
                type: "Get",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log("succsss" + data);
                    //after getting the data, bind the DataTable.
                    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: 'select-checkbox',
                                defaultContent: '',
                                data: null,
                                title: ''
                            },
                            {
                                data: 1,
                                title: "Access Right Name"
                            },
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                        ],
                        select: {
                            style: 'os',
                            selector: 'td:first-child'
                        },
                    });

                    //Expand/Collapse the nested objects.
                    $('#datatables tbody').on('click', '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 this row
                            row.child(format(row.data())).show();
                            tr.addClass('shown');
                        }
                    });

                },

                error: function (ex) {
                    console.log(ex);
                }
            });
        });

I've used the same format for the table structure.

This is the initial error i receive:

There after pressing OK, i receive this error:

Then finally the table looks like this:

I can still click the plus button, and it will preperly show the detailed part.

Im not sure whats wrong, if i had to guess Im probably accessing the data wrong, or maybe some css files are interfering.

Sageis1

I think i might have found the issue, not have not solved it yet though, when i reload the website, in the console i get theres error messages

Sageis1

okay i'm such an idiot, i fixed it, i needed to manipulate the data api around to get it to work. Next time ill read more before i ask questions.