var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "resources/data/data.txt",
table: "#NACH-User-Table",
idSrc: 'id',
fields: [ {
label: "User ID:",
name: "UserID"
}, {
label: "Name:",
name: "Name"
}, {
label: "Email ID:",
name: "emailID"
}, {
label: "Role:",
name: "Role"
}, {
label: "Status:",
name: "Status"
}
]
} );
$('#NACH-User-Table').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
submit: 'allIfChanged'
} );
} );
$('#NACH-User-Table').DataTable({
"ajax" :"resources/data/data.txt",
select: {
style: 'os',
selector: 'td:first-child'
},
ordering: true,
"dom": 'B<"top"fl>rt<"bottom"ip><"clear">',
button: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
"columns": [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ "data": "UserID"},
{ "data": "Name" },
{ "data": "emailID"},
{ "data": "Role"},
{ "data": "Status"}
]
});
});
<table id="NACH-User-Table" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>UserID</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
</table>