Edit Jquery DataTable Asp.net c# CRUD operation

Our Reader Score
[Total: 0 Average: 0]

 Overview: How to edit jQuery Datatable in asp.net c# using Gridview control, CRUD operation.The purpose of this article is to show how you can implement JQuery DataTables with Asp.net Gridview Control. The jQuery DataTables plugin is an excellent client-side component.

This plugin adds lots of functionalities to the plain HTML tables that are placed in web pages such as  sorting, searching, pagination, changing page length etc

HTML Markup:

Here you will see in HTML markup there’s a pencil image icon which on click becomes editable  and so a user can edit the values also look at class name  .i.e  set class name as update_ + id  using string.Concat().   where id is  database rowId.


Code Behind:

You need to add Page_PreRender event on .cs  where we set gridview’s UseAccessibleHeader=true

Now the Real coding part comes here using JQuery Data tables.

Add JqueryDatable Script Files

Now after apply JQuery DataTable, our Asp.net  Gridview control look like below image.

DefaultMode :

Editable jquery datatable sp.net c#


Edit Mode:

on click edit icon makes Jquery datatable edit mode

Edit Row:

 On Click of pencil image we convert Lable into Textboxes and place it inside JQuery Datatables which we stored using variable oTable.

Here on EDIT mode we replace pencil image with SAVE and CANCEL image button, also set respected Ids into classes as same we did for pencil image.

On cancel image click we undo edit mode, when the user finishes editing and click Save image button an AJAX call is sent to the server-side page that updates the records into the database.

Also you need to check some JQuery Datatables method which have used like fnUpdate() , fnDraw() , fnGetData(nRow)

Client-side code performing jQuery data table edit, update, insert functionality:



Server Side:   – Add a webserivce file  i named as updatefn.asmx

In updatefn.asmx  we have a WebMethod  updateName(), which fires Update query and return result status. which we will display as resulting message on ajax call of success.


Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Get your Printable Copy