Refresh DataTable after Add

Question

Hi   I have below controller & JS. I want to refresh datatable after Add & display message in popup " style=" width:100% " id=" tblLocation">            @Html.DisplayNameFor(model => model.Id)         @Html.DisplayNameFor(model => model.Description)         @Html.DisplayNameFor(model => model.IsActive)      Action             @foreach ( var  item  in  Model)   {         @Html.DisplayFor(modelItem => item.Id)         @Html.DisplayFor(modelItem => item.Description)         @Html.DisplayFor(modelItem => item.IsActive)         class = 'btn btn-primary btn-sm'  id= 'btnEdit' > class = 'fa fa-pencil' >  Edit    class = 'btn btn-danger btn-sm'  id= 'btnDelete'  style= 'margin-left:5px'    @{  if (item.IsActive ==  "N" )   {   @:disabled= "disabled"    }   }> class = 'fa fa-trash' >  Delete          }         function  Add() {   var  res = validate();   if  (res ==  false ) {   return   false ;   }   var  objLocation = {   Id: $( '#txtId' ).val().toUpperCase(),   Description: $( '#txtDescription' ).val().toUpperCase(),   IsActive: $( '#txtIsActive' ).val().toUpperCase()   };   $.ajax({   url:  "/Location/Add" ,   data: JSON.stringify(objLocation),   type:  "POST" ,   contentType:  "application/json;charset=utf-8" ,   dataType:  "json" ,   success:  function  () {   $.notify(result.message, {   globalposition:  "top center" ,   //position:"center",    className: "success"    })   $( '#myModal' ).modal( 'hide' );   },   error:  function  (xhr, ajaxOptions, thrownError) {   $( "#msgModalBody" ).html( 'Status : '  + xhr.status +  ' Error : '  + thrownError);   $( "#msgModal" ).modal( 'show' );   }   });   }   Thanks

Sachin Singh · Accepted Answer

The problem is, you are just coding but not getting the concept. 1.Ajax:- Ajax is used for the async request, which means the page will not be refreshed. Now, as the page is not refreshing, any HTML in your page won't be updated.   as per your code, you need to add the HTML on success. For this, you need to send the Html like view or partial page and then replace the page with what you are getting.   So, my recommendation is, With dataTable, if you are using Ajax for CRUD then use the Ajax version of DataTable too, to load the table, then all your problems will be solved within a minute.              $(document).ready(function () {              //$('#dataTable').DataTable();              $( "#tblLocation" ).dataTable({                      ajax: {                     type:  "get" ,                     url:  "/Admin/GetPosts" ,                     dataType:  "json" ,                     dataSrc:  ""                       },                 columns: [                     {                         data:  "LocationId" ,                         visible: false                      },                     {                         data:  "Description"                      },                                        {                         data:  "LocationId" ,                         render: function (data) {                              return   "  + data +  ">Edit " ;                              }                     },                     {                         data:  "PostId" ,                         render: function (data) {                              return   "  + data +  ">Delete " ;                              }                     }                           ]                       });         });          "divMenu"  style= "display:none;height:300px;width:200px;" >          class = "table table-primary"  id= "tblLocation" >                                "#" >Edit                             "#" >Delete                      Now for every Action, you can reload the dataTable on Success function with     $( '#dataTable' ).DataTable().ajax.reload();        for example for delete $( '#tblLocation' ).on( 'click' ,  '.btnDelete' , function (e) {             debugger;              e.preventDefault();           var Id = $( this ).attr( "data-Id" );             $.ajax({                      type:  "Post" ,                 url:  "/Admin/DeletePost" ,                 dataType:  "html" ,                                data: { Id: Id },                      cache:  false ,                 success: function (res) {                     debugger;                     $( '#dataTable' ).DataTable().ajax.reload();                                       alert( "Deleted successfully" );                      }             })                         });    similarly for add and Update.

Ramco Ramco · Answer

Hi     How can i refresh according to my code. With ref to your code i get data in datatable but Searching,Show entries functionality not working, I am not able to trace that issue   Thanks

Jignesh Kumar · Answer

Hi,   Please refer this link which will help you out, You need to call Get method to bind table after record inserted in database.   https://www.c-sharpcorner.com/blogs/how-to-insert-and-retrieve-data-using-jquery-ajax-in-asp-net