Inline table editing of a child row.
Inline table editing of a child row.
I have created numerous applications that use the DataTables row.child API for displaying detail information and it works nicely. I also have wrote numerous DataTables Editor applications as well.
I now would like to take these 2 disciplines and combine them. So using simple inline editing along with the row.child API to allow simple inline table editing of the child row data.
I found only a few post on the internet regarding this, however these posts referred to the Editor form editing and not inline table editing.
Not sure if this can be simply achieved or if anyone has an example of this. I will post my script and highlight what I need to do.
<!DOCTYPE html>
<html>
<head>
<title>User Management</title>
<link rel='stylesheet' type='text/css' href='/css/jquery.dataTables.min.css'>
<link rel='stylesheet' type='text/css' href='/css/buttons.dataTables.min.css'>
<link rel='stylesheet' type='text/css' href='/css/select.dataTables.min.css'>
<link rel="stylesheet" type="text/css" href="/DataTables_Editor/css/editor.dataTables.min.css">
<style>
td.details-control {
background: url('../../images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../../images/details_close.png') no-repeat center center;
}
</style>
<script type='text/javascript' src='/js/jquery-current.min.js'></script>
<script type="text/javascript" src="/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<script type='text/javascript' src='/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src="/DataTables_Editor/js/dataTables.editor.min.js"></script>
<script type='text/javascript' src='/js/dataTables.buttons.min.js'></script>
<script type='text/javascript' src='/js/dataTables.select.min.js'></script>
<script type='text/javascript'>
var editor; // use a global for the submit and return data rendering
//*************************************************************************
//Start - document.ready
//**************************************************************************
$(document).ready(function() {
//* DataTable Form Editor
editor = new $.fn.dataTable.Editor( {
ajax: "tabFile.php",
table: "#userTable",
fields: [
{label: "User Name",
name: "UTNME"},
{label: "Department #",
name: "UTDEPT#"},
{label: "Department",
name: "UTDEPT"},
{label: "Location",
name: "UTLOC"},
{label: "Email",
name: "UTEML"}
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
//****************************************************************************
//****************************************************************************
//*********** HERE IS WHERE I WANT TO ADD A SMALL TABLE FOR INLINE EDITING
//*********** ALL THAT IS REQUIRED IS THE LABEL/HEADERS AND DATA CELLS FOR EDITING
//*********** IS THIS POSSIBLE???????
//*****************************************************************************
//*****************************************************************************
}
// Activate an inline edit on click of a table cell
$('#userTable').on( 'click', 'tbody td:not(:first-child) ', function (e) {
editor.inline( this );
} );
//* DataTable
var table = $('#userTable').DataTable( {
dom: "Bfrtip",
ajax: "tabFile.php",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: "UTNME"},
{ data: "UTDEPT#"},
{ data: "UTDEPT"},
{ data: "UTLOC"},
{ data: "UTEML"}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
//Add event listener for opening and closing details
$('#userTabTable 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');
}
} );
} );
</script>
</head>
<body>
<h3>User Management</h3>
<br>
<table id="userTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th></th>
<th>User Name</th>
<th>Department #</th>
<th>Department</th>
<th>Location</th>
<th>Email</th>
</tr>
</thead>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I forgot to mention that all the data is coming from one file from my server side script. No joins required.
So the key question here is, what data do you want to present in the details row? If you want an editable table, then you would need to create a new DataTable and Editor instance for each of the child rows shown.
If it isn't a table you want to show, but rather just a list of values, then the standalone editor would be more appropriate.
Allan
Allan,
I do what to have another editable table.
So to do this I would create a whole new child table with different IDs and add the DataTable and Editor instance to my function format ( d )?
Would I also use the same server side script?
Yes - if you want a new editable table inside the child row, you would need another DataTable and an Editor instance attached to it.
Probably not. You'd presumably want the server-side script to address the child table only.
What you are looking to do is basically combine these two blog posts:
Allan
If the data I am using for the application comes from the same file, why would I need 2 server side script?
The Parent / child editing in Editor example uses to separate files "sties" and "users" so can see why there would be 2 SSPs.
Conversely - why would you show the same data in two different tables? Presumably you are thinking that you would send some kind of parameter that tells the script which table you want the data to be acted upon? If so, then yes, that is absolutely a valid way of doing it.
Allan
The reason I would like to use the child row option is for readability and editing for the end-user. (see image below).
Instead stretching the 30 plus fields across 1 row, I would rather split the data up into 2 rows (parent/child) to show all data for the record sans the horizontal scroll.
All data can be edited so what I would like to achieve is inline table editing on both parent and child row.
It sounds simple enough but I have been struggling with this method.
I tried you last suggestions, however I am hitting a wall with combining
Parent / child editing in Editor.
Ajax loaded row details.
Not sure if there is anyone out there that accomplished this, and if not I am determined to do so.
Thanks for the image and explanation. That clarifies a lot. I'm afraid that's going to be outside the range of problems that DataTables and Editor currently attempt to solve. It might be possible with a fair amount of code to get things like click to edit to work over multiple rows, but more complex interactions such as KeyTable wouldn't work at all I'm afraid.
Allan