Jquery Datatable Editor Create Edit Delete using Asp.net webform

Question

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>

In Editor ajax how to get values of pkid, code, name.
I'm using editor for first time so is there anything i'm missing?
Format of Editor ajax for create, edit and delete are correct or not?.
I tried everything but It shows internal error on clicking update, I can't able to get any ideas.
Help me with JQuery datatable editor please.

Muthu · Accepted Answer · 2020-04-12 09:10:03Z

Changes in Editor function

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

Add these code for create, edit and remove functions

$(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);
                    }
                });
            });
        });

Collectives™ on Stack Overflow

Jquery Datatable Editor Create Edit Delete using Asp.net webform

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related