Example
| Name | Position | Office | Extn. | Start date | Salary | |
|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary |
$(document).ready(function(){
var table = $('#example').DataTable({
'ajax': '/lab/articles/jquery-datatables-row-grouping-and-checkboxes/arrays.txt',
'rowsGroup': [0, 3],
'columns': [
{
'data': 2,
'checkboxes': {
'selectRow': false
}
},
{ 'data': 0 },
{ 'data': 1 },
{ 'data': 2 },
{ 'data': 3 },
{ 'data': 4 },
{ 'data': 5 }
]
});
});In addition to the above code, the following Javascript library files are loaded for use in this example:
//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jshttps://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js
https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js
https://gyrocode.github.io/jquery-datatables-checkboxes/1.1.3/js/dataTables.checkboxes.min.js
The following CSS library files are loaded for use in this example to provide the styling of the table:
https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.csshttps://gyrocode.github.io/jquery-datatables-checkboxes/1.1.3/css/dataTables.checkboxes.css
This is excellent work.
I am trying to combine collapsible\expandable row grouping with checkboxes. I only need the collapse\expand button next to the row groups whilst still be able to select the checkboxes but I have been unable to achieve the desired result
I put together an example here
https://jsfiddle.net/rodriguennr/oe7dp1mt/3/
The idea is that I could collapse or expand all row groups OR I could collapse or expand individual row groups AND at the same time I could select or unselect all rows of the table or only certain rows within some or all of the row groups inside the table.
I believe the same question was asked by another user here:
https://datatables.net/forums/discussion/63484/combine-row-group-checkbox-with-collapsible-groups
Is this doable with the gyrocode extensions and plugins?
Rod, I have corrected your example, there were a few minor errors, please see updated example.
Hi Michael,
Thank you for looking into this issue for me.
The desired result is actually the reverse of what you have done. I think I didn’t explain or describe the issue correctly.
The intention is to have the expand button ONLY on the header rows, next to the checkboxes of the header rows.
For example take the first header row ,Tokyo(2)
On this header row, I want an expand button followed by the checkbox.
The expand button next to the header row will expand or collapse the two child rows under Tokyo(2) and the checkbox on this header row will select or unselect the two child rows under Tokyo(2)
The child rows will have NO expand button but only their checkboxes as the user could select only one item under a header row and submit, leaving the others in place.
The goal is for the table to only show the header rows by default or when the table first loads. The user can then expand each header row individually by clicking on the Expand button
On top of the table, we could have a pair of Expand All \ Collapse All buttons to expand or collapse all header rows at once.
I hope this makes sense.
Thank you,
Rod
I adapted this StackOveflow answer and created this example. It’s still far from perfect but at least could be your starting point.
Any news? Could you please let me know if the above collapsible row groups with checkboxes can be achieved with the gyrocode library?
Thanks, Rod
Please see updated example posted earlier.
This is perfect! Thank you so much. I think this example should be published as another use case of the gyrocode plugin.