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 · 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