Inline edit in http://live.datatables.net

Marnadu

Hi, I am very new for datatable & Jquery related stuff. Here with I have placed the HTML imports and Javascript code what I have taken from the source from your site. I am using this link http://live.datatables.net to learn and change the imports in the HTML & JS. with that I couldn't able to do inline edit. Please help to resolve

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>

$(document).ready( function () {
editor = new $.fn.dataTable.Editor( {
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );

$('#example').on( 'click', 'tbody td ', function (e) {
   editor.inline( this, {onBlur:'submit'});  

});

$('#example').DataTable( {
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
order: [ 1, 'asc' ],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );

} );

allan

That looks like it should work. What about it doesn't work? Perhaps you can give is a link to the live.datatables.net page that you have created.

Allan

Marnadu

Hi Allan , Thanks for the quick respone.
Here is the linke : http://live.datatables.net/tepisupu/1/edit.
Thanks a lot,

allan

Did you have a look in the console? It shows:

Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

Basically there is no id for the rows. You could add an id attribute to each row, or use the HTML from this example which already has them (click the "HTML" tab below the table).

Allan

Marnadu

Hi Alla,. Thanks a lot. it's working now. In console , I could see the only the message as script error. Not details like above.