jquerywebformsasp.net-ajaxjquery-datatables-editor

Jquery Datatable Editor Create Edit Delete using Asp.net webform


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>


Solution

  • 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);
                        }
                    });
                });
            });