var editor;
$(document).ready(function() {
var Pkid = ? ;
var Code = ? ;
var Name = ? ;
editor = new $.fn.dataTable.Editor({
ajax: {
create: {
type: 'POST',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
success: function(response) {
console.log(response);
},
error: function(response) {
alert(response.statusText);
}
},
edit: {
type: 'POST',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
success: function(response) {
console.log(response);
},
error: function(response) {
alert(response.statusText);
}
},
delete: {
type: 'POST',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
success: function(response) {
console.log(response);
},
error: function(response) {
alert(response.statusText);
}
},
},
table: "#studentTable",
idSrc: 'pkid',
fields: [{
label: "Code:",
name: "Code"
}, {
label: "Name:",
name: "Name"
}]
});
datatable();
});
function datatable() {
var SearchType = "0";
var SearchValue = "";
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{SearchType: "' + SearchType + '",SearchValue: "' + SearchValue + '"}',
url: "DataTableAdd.aspx/GetStudents",
success: function(response) {
$('#studentTable').DataTable({
dom: "Bfrtip",
data: JSON.parse(response.d),
columns: [{
'data': 'pkid'
},
{
'data': 'Code'
},
{
'data': 'Name'
}
],
select: true,
buttons: [{
extend: "create",
editor: editor
},
{
extend: "edit",
editor: editor
},
{
extend: "remove",
editor: editor
}
]
});
},
error: function(response) {
alert(response.d);
}
});
}
<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" src="Scripts/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/datatables.min.css" />
<script src="Scripts/dataTables.editor.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/editor.dataTables.min.css" />
<table id="studentTable" class="display">
<thead>
<tr>
<th>pkid</th>
<th>Code</th>
<th>Name</th>
</tr>
</thead>
</table>
pkid
, code
, name
.var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
//ajax: ,
table: "#studentTable",
idSrc: 'pkid',
fields: [{
label: "Code:",
name: "Code"
}, {
label: "Name:",
name: "Name"
}
]
});
datatable();
});
$(function () {
editor.on('create', function (e, json, data) {
var Pkid = data.pkid;
var Code = data.Code;
var Name = data.Name;
$.ajax({
type: "POST",
dataType: "json",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
contentType: "application/json; charset=utf-8",
success: function (response) {
datatable();
},
error: function (response) {
alert(response.statusText);
}
});
});
editor.on('edit', function (e, json, data) {
var Pkid = data.pkid;
var Code = data.Code;
var Name = data.Name;
$.ajax({
type: "POST",
dataType: "json",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
contentType: "application/json; charset=utf-8",
success: function (response) {
datatable();
},
error: function (response) {
alert(response.statusText);
}
});
});
editor.on('remove', function (e, json, data) {
var Pkid = data[0];
var Code = "";
var Name = "";
$.ajax({
type: "POST",
dataType: "json",
data: '{Pkid: "' + Pkid + '",Code: "' + Code + '",Name: "' + Name + '"}',
url: "DataTableAdd.aspx/save",
contentType: "application/json; charset=utf-8",
success: function (response) {
datatable();
},
error: function (response) {
alert(response.statusText);
}
});
});
});