Datatables editor not working with datasource as javascript array
Datatables editor not working with datasource as javascript array
anish
Posts: 9Questions: 5Answers: 0
The datasource for the table is via an array - i have set idSrc to 0 in the editor config. I have enabled only inline editing - however both create and edit fail to work. After i call successCallback i am unable to edit or create - and the edited cell still looks in edit mode. I can use search though - so its not hung someplace.
Any help would be appreciated.
(Dont know if this is relevant but i used WRO which packs on all the datatables, jquery and other js and css files into one js and css file, which is why you wont see the inclusion of individual files in my code).
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="hexgen/lib.css" rel="stylesheet">
<!-- this includes all the datatales related css files -->
</head>
<body>
<table id="example" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Id</th>
<th>Base Rate Code</th>
<th>Day Count</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="hexgen/lib.js?minimize=false"></script>
<!-- This includes all the datatables js files -->
<script>
var editor;
var flds = [
{"name":"id","label":"ID","type":"hidden","data":0},
{"name":"baseRateKey","label":"Base Rate Code","data":1},
{"name":"dayCount","label":"Day Count", "data":2}
];
var colDefs = [
{"type":"num","title":"ID"},
{"type":"string","title":"Base Rate Code"},
{"type":"string","title":"Day Count"}
];
var data = [[8,"key1","count1"],[9,"key2","count2"],[10,"key3","count3"]];
$('#example').on( 'click', 'tbody td', function (e) {
editor.inline( this, { onBlur: 'submit'});
} );
editor = new $.fn.dataTable.Editor( {
table: '#example',
fields: flds,
"idSrc": 0,
ajax: function ( method, url, d, successCallback, errorCallback ) {
var output = { data: [] };
output.data.push(editor.get());
if (d.action === 'create') {
output.data[0].id = 22;//Set ID to a new non-existing id - just for testing
}
successCallback(output);
}
} );
var table = $('#example').DataTable( {
dom: 'BlRfrti',
data: data,
columns: colDefs,
buttons: [
{ extend: "create", editor: editor },
],
} );
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The issue is that your
ajaxfunction isn't fully implementing the client / server communication that Editor expects.Specifically the returned data should be in the same format that DataTables expects for the rows, but you are actually giving it an object which has the same format that Editor has submitted to the server.
If you modify your function a little to be:
it will work as "expected".
I quote expected as you would be best using the data from
drather than the Editor form.Editing won't work as the function doesn't implement the
editaction yet.You might find this example useful, even if not directly applicable.
Allan
Thanks - it works like a charm now