JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://orionhub.org/edit/edit.html#/file/Nirmala-OrionContent/JavascriptFiles/jquery.dataTables.min.js"></script>
<script src="https://orionhub.org/edit/edit.html#/file/Nirmala-OrionContent/JavascriptFiles/jquery-1.11.1.min.js"></script>
<script src="https://orionhub.org/edit/edit.html#/file/Nirmala-OrionContent/JavascriptFiles/dataTables.bootstrap.js"></script>
<script src="https://orionhub.org/edit/edit.html#/file/Nirmala-OrionContent/JavascriptFiles/dataTables.tableTools.min.js"></script>
<script src="https://orionhub.org/edit/edit.html#/file/Nirmala-OrionContent/JavascriptFiles/dataTables.editor.min.js"></script>
<html>
<!--Please find my Js files in the external Resource-->
</html>
JavaScript
var editor;
var oTable;
function getStudentdetails(id) {
editor = new $.fn.dataTable.Editor({
dom: "Tfrtip",
table: "#table_student_details",
fields: [ {
label: "Id:",
name: "id",
attr: {
maxlength: 50,
name:"id",
placeholder: 'ID'
}
}, {
label: "Name:",
name: "name"
}
],
ajaxUrl: {
"create": "/addStudentdetails",
"edit": "/editStudentdetails",
"remove": "/deleteStudentdetails"
},
});
oTable = $('#table_student_details').DataTable({
dom: "Tfrtip",
destroy: true,
ajax: {
"url": url_prefix + "/getStudentDetails",
"data": function(d) {
d.id = id;
}
},
columns: [{
"data": "id"
}, {
"data": "name"
},],
tableTools: {
sRowSelect: "os",
aButtons: [{
sExtends: "editor_create",
editor: editor
}, {
sExtends: "editor_edit",
editor: editor
}, {
sExtends: "editor_remove",
editor: editor
}]
}
});
}