How to Add Checkbox to Expandable Rows
How to Add Checkbox to Expandable Rows
Sageis1
Posts: 53Questions: 9Answers: 0
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"
]
This question has accepted answers - jump to:
Answers
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
okay ill do just that @kthorngren .
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/ )
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.datato define the array positions for each column. Also you will need to usedata: nullanddefaultContentfor 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
Duplicate Post.
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.
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
selectevent, as shown in the example, to display the row id when selected. Moved the child row column to the last column. Also changed theselect.selectorto be the fist column.Kevin
Thanks so much, you have been extremely help yesterday and today, thanks.
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
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.
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
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.