How to destroy an existing jQuery table on an ASP.net MVC view and the

Question

At view startup, I create a jQuery table. It represents a "errors not resolved" set of errors I retrieve from a database. The default. The corresponding radio-button is checked. For a radio-button selected (in this case the 'error resolved' radio button), I attempt to destroy the prior created datatable and then rebuild it for that type of 'error' that the button represents. I get a popup error: DataTables warning: table id=blogerrorlogs-data-table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 I used the http://datatables.net/tn/3 as a reference to do the destroy of the jQuery datatable but it is not working. What am I doing wrong? ----------------------------------- Here's the view's code": @model GbngWebClient.Models.BlogErrorLogForMaintListVM h2 class = "page-header" > Error Log Maintenance h2 > @* For the error message returned as JSON. *@ div > @* Hidden as display = "none" . *@ p class = "alert alert-danger" id = "jsonErrorMessage" style = "display:none" > p > div > br /> div class = "row" > div class = "col-md-12" > div class = "panel" > div > input type = "radio" id = "notresolved" value = "notresolved" checked > label for = "notresolved" > Errors Not Resolved label > div > div > @* Default as checked. *@ input type = "radio" id = "resolved" value = "resolved" > label for = "resolved" > Errors Resolved label > div > div > br /> div class = "panel panel-primary list-panel" id = "list-panel" > div class = "panel-heading list-panel-heading" > h1 class = "panel-title list-panel-title" > List of Error Logs h1 > div > br /> div class = "panel-body" > div style = "overflow-x:auto; width:100%" > table id = "blogerrorlogs-data-table" class = "table table-striped table-bordered" style = "width:100%" > table > div > div > div > div > div > @Scripts.Render("~/bundles/datatables") @Scripts.Render("~/Content/datatables") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Styles.Render("~/Content/css") script type = "text/javascript" src = "//cdn.tinymce.com/4/tinymce.min.js" referrerpolicy = "origin" > script > @section Scripts { script type = "text/javascript" > // Declare the datatable ViewModel. var blogErrorLogListVM; // Initial start up. $(function () { LoadJqueryTable(); }); //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // The 'resolved' radio button click event handler. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ $('#resolved').on('click', function () { // Call the BlogErrorLogMaint controllers action method to set the session variable. $.ajax({ type: "POST", url: "/BlogErrorLogMaint/SetBooleanSessionVar", data: { value: true }, // Boolean true. Note: cannot be True. datatype: "json", traditional: true, success: function (data) { $("#notresolved").prop("checked", false); $('#jsonErrorMessage').remove(); // Destroy the prior created jQuery table. DestroyJqueryTable(); // Load the jQuery table for the radio button selection made. LoadJqueryTable(); } }); }); //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // The 'not resolved' radio button click event handler. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ $('#notresolved').on('click', function () { // Call the BlogErrorLogMaint controllers action method to set the session variable. $.ajax({ type: "POST", url: "/BlogErrorLogMaint/SetBooleanSessionVar", data: { value: false }, // Boolean false. Note: cannot be False. datatype: "json", traditional: true, success: function (data) { $("#resolved").prop("checked", false); $('#jsonErrorMessage').remove(); // Destroy the prior created jQuery table. DestroyJqueryTable(); // Load the jQuery table for the radio button selection made. LoadJqueryTable(); } }); }); //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Destroy the jQuery datatable. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ function DestroyJqueryTable() { blogErrorLogListVM = { destroy: function () { dt = $('#blogerrorlogs-data-table').DataTable({ "destroy": true }); } } // Destroy the datatable. blogErrorLogListVM.destroy(); } //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Load the jQuery datatable. //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ function LoadJqueryTable() { blogErrorLogListVM = { dt: null, init: function () { dt = $('#blogerrorlogs-data-table').DataTable({ "serverSide": true, // For processing server-side. "processing": true, // For showing the progress bar. "ajax": { "url": "@Url.Action("GetBlogErrorLogsForMaintList", "BlogErrorLogMaint")", "dataType": "json", "data": function (data) {}, "error": function (error) { $("#jsonErrorMessage").text(error.responseJSON.ErrorMessage); $("#jsonErrorMessage").css("display", "block"); } }, "columns": [ { "title": "Actions", "data": "BlogErrorLogId", "searchable": false, "sortable": false, "render": function (data, type, row, full, meta) { // Hyper links that will navigate to the views - it calls the controllers action passing the row's ‘blogErrorLogId’ to pull // the information for it and display in the modals herein - partial views. // - Builds the query string per hyper link. return ' a href ="@Url.Action("EditBlogErrorLog", "BlogErrorLogMaint ")?blogErrorLogId=' + data + '" class = "editBlogErrorLog" > Edit a > | a href ="@Url.Action("DetailsBlogErrorLog", "BlogErrorLogMaint ")?blogErrorLogId=' + data + '" class = "detailsBlogErrorLog" > Details a > | a href ="@Url.Action("DeleteBlogErrorLog", "BlogErrorLogMaint ")?blogErrorLogId=' + data + '" class = "deleteBlogErrorLog" > Delete a > '; } }, { "title": "Log Date", "data": "LogDateTime", "searchable": true }, { "title": "User Name", "data": "UserName", "searchable": true }, { "title": "Message Type", "data": "MessageType", "searchable": true }, { "title": "Log Message", "data": "LogMessage", "searchable": true }, { "title": "Resolved Switch", "data": "ResolvedSwitch", "searchable": true }, { "title": "Resolved Date", "data": "ResolvedDateTime", "searchable": true }, ], "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], }); } } // Initialize the datatable. blogErrorLogListVM.init(); } script > }

Sachin Singh · Answer

unnecessarily you made things complicated just fill your datatable with errorsnotResolved. public ActionResult LoadTable( int ? val) { if (val==2) { return json(context.Errors.where(x=>x.Status== "Not Solved" ), JsonRequestBehavior.Allowget); } return json(context.Errors.where(x=>x.Status== "Solved" ), JsonRequestBehavior.Allowget) ; } scritpt on radio button selection send the selected value (1 for not solved and 2 for solved) and on success $( '#my-datatable' ).DataTable().ajax.reload(); and that's it, as simple as that.

Jose Hernandez · Answer

//Try asigning the table to a variable and then execute the function to the variable var table = $('# blogerrorlogs-data-table ').DataTable(); table.destroy(); and then the rest of your code to initialize/reinitialize the datatable here: dt = $('#blogerrorlogs-data-table').DataTable({...............

First Last · Answer

Sachin, Also, in doing some flow logic/testing, when issuing $('#my-datatable').DataTable().ajax.reload(); it goes back into the LoadJqueryTable() function which is coded to execute the action method again. The reload() appears to force the code back in there. Odd!

First Last · Answer

Sachin, My return of JSON statement is not as simple as yours. First I am using a session variable to set the error type I want. Initially it is set on the server-side to get the 'not resolved' error type. Then the Index view - at startup - executes the server-side action method 'GetBlogErrorLogsForMaintList' to pass back JSON which is used to load the datatable with the 'not resolved' error type. That method calls a web api and uses ADO. It then returns: return Json(new DataTablesResponse(requestModel.Draw, blogErrorLogForMaintListVM.BlogErrorLogForMaintList, totalCount, totalCount), JsonRequestBehavior.AllowGet); OR if an error is discovered: Response.StatusCode = (int)HttpStatusCode.InternalServerError; return Json(new { ErrorMessage = errorMessage }, JsonRequestBehavior.AllowGet); In the radio buttons, the session variable is set accordingly using an action method. Then the action method 'GetBlogErrorLogsForMaintList' is called again to pass back JSON which is used to load the datatable accordingy once again - but fails. How does your solution fit into this? Here is the GetBlogErrorLogsForMaintList action method: [HttpGet] [JsonNetFilter] public async Task GetBlogErrorLogsForMaintList([ModelBinder( typeof (DataTablesBinder))] IDataTablesRequest requestModel) { var totalCount = 0; string errorMessage = String.Empty; BlogErrorLogForMaintListVM blogErrorLogForMaintListVM = new BlogErrorLogForMaintListVM(); BlogErrorLogForMaintResult blogErrorLogForMaintResult = new BlogErrorLogForMaintResult(); try { // Get the 'resolved' or 'not resolved' blog error logs list depending on the selection made. blogErrorLogForMaintResult = await GetBlogErrorLogsForMaintListByType(Session[ "UserName" ].ToString(), Session[ "WebApiUrl" ].ToString(), Session[ "MyIpAddress" ].ToString(), Session[ "ResolvedSwitch" ].ToString()); // Check if an error occurred in the web api. if (blogErrorLogForMaintResult.ApiErrorMessage == null ) { if (blogErrorLogForMaintResult.Status == 1) { // Build the blogErrorLogForMaintListVM from the results. foreach (var hold in blogErrorLogForMaintResult.BlogErrorLogForMaintList) { BlogErrorLogForMaint blogErrorLogForMaint = new BlogErrorLogForMaint { BlogErrorLogId = hold.BlogErrorLogId, LogDateTime = hold.LogDateTime, UserName = hold.UserName, MessageType = hold.MessageType, LogMessage = hold.LogMessage, ResolvedSwitch = hold.ResolvedSwitch, ResolvedDateTime = hold.ResolvedDateTime, }; blogErrorLogForMaintListVM.BlogErrorLogForMaintList.Add(blogErrorLogForMaint); } // Get the total count. totalCount = blogErrorLogForMaintListVM.BlogErrorLogForMaintList.Count; // Return JSON to the view - Views\AdminFunctions\BlogErrorLogMaint\Index.cshtml. // Note: // 1.) The 'totalCount' and 'totalCount' here is for 'recordFiltered' and 'recordsTotal' of this DataTablesResponse function. // 2.) The date properties will now be sent over with the correct displays due to the ActionFilter attribute set on this action method. return Json( new DataTablesResponse(requestModel.Draw, blogErrorLogForMaintListVM.BlogErrorLogForMaintList, totalCount, totalCount), JsonRequestBehavior.AllowGet); } else { if (Session[ "ResolvedSwitch" ].ToString() == "True" ) { errorMessage = "There currently are no 'resolved' blog error logs." ; } else { errorMessage = "There currently are no 'unresolved' blog error logs." ; } } } else { // Set the error message with the web api error message. The ReasonPhrase set in BLL_BlogErrorLogMaint. errorMessage = blogErrorLogForMaintResult.ApiErrorMessage; } } catch (Exception ex1) { // Friendly user message. exceptionMessage = "Server error on getting the list of blog error logs by type. We have been notified and are working to resolve this. Please do not continue." ; try { // Instantiate the ClientErrorResult for getting data from the web api. ClientErrorResult clientErrorResult = new ClientErrorResult(); // Call the web api to process the error log and send an "alert" email to a staff member (an Admin). // - It calls a model class to execute a method. clientErrorResult = await ProcessClientError(Session[ "UserName" ].ToString(), ex1.Message, "Server error on getting the list of blog error logs by type'. User name: " + Session[ "UserName" ] + ". Get method: GetBlogErrorLogsForMaintList." , Session[ "WebApiUrl" ].ToString(), Session[ "MyIpAddress" ].ToString()); // Check if an error occurred in the web api. if (clientErrorResult.ApiErrorMessage == null ) { // All good. Just show the friendly user message set above. // Pass data from the controller to the corresponding view. errorMessage = exceptionMessage; } else { // Set the viewbag with the web api error message. The ReasonPhrase set in BLL_ClientError. errorMessage = clientErrorResult.ApiErrorMessage; } } catch (Exception ex2) { // Pass data from the controller to the corresponding view. errorMessage = "Failure in ProcessClientError. Exception error: " + ex2.Message + ". Original error: " + exceptionMessage; } } // If your get this far, then an error occurred. // Set a status code which will initiate the AJAX function: 'error: function (error) {}' in the Response.StatusCode = ( int )HttpStatusCode.InternalServerError; // Creates JSON representation of anonymous data. // Return a JSON object - key/value pairs to the view - Views\AdminFunctions\BlogErrorLogMaint\Index.cshtml. // - It contains the error message. return Json( new { ErrorMessage = errorMessage }, JsonRequestBehavior.AllowGet); }

First Last · Answer

Jose, With that 1 line added: $('#blogerrorlogs-data-table').DataTable().destroy(); dt = $('#blogerrorlogs-data-table').DataTable({...............as I had already - NO changes made here. I get: jquery-3.3.1.js:3827 Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Jose Hernandez · Answer

Try calling destroy() function in your init function as follows: function LoadJqueryTable() { blogErrorLogListVM = { dt: null, init: function () { $('#blogerrorlogs-data-table').DataTable().destroy(); //Here call destroy() function dt = $('#blogerrorlogs-data-table').DataTable({ "serverSide": true, // For processing server-side. "processing": true, // For showing the progress bar. "ajax": { "url": "@Url.Action("GetBlogErrorLogsForMaintList", "BlogErrorLogMaint")", "dataType": "json", "data": function (data) {}, "error": function (error) { $("#jsonErrorMessage").text(error.responseJSON.ErrorMessage); $("#jsonErrorMessage").css("display", "block"); } }, "columns": [ { "title": "Actions", "data": "BlogErrorLogId", "searchable": false, "sortable": false, "render": function (data, type, row, full, meta) { // Hyper links that will navigate to the views - it calls the controllers action passing the row's ‘blogErrorLogId’ to pull // the information for it and display in the modals herein - partial views. // - Builds the query string per hyper link. return ' Edit | Details | Delete '; } }, { "title": "Log Date", "data": "LogDateTime", "searchable": true }, { "title": "User Name", "data": "UserName", "searchable": true }, { "title": "Message Type", "data": "MessageType", "searchable": true }, { "title": "Log Message", "data": "LogMessage", "searchable": true }, { "title": "Resolved Switch", "data": "ResolvedSwitch", "searchable": true }, { "title": "Resolved Date", "data": "ResolvedDateTime", "searchable": true }, ], "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], }); } } // Initialize the datatable. blogErrorLogListVM.init(); }

First Last · Answer

Jignesh..that removes it from the DOM and then the subsequent load I want to do (as it trys to find that element) will not work as it has been removed.

Jignesh Kumar · Answer

Hi, If you want to remove table from DOM element. please use this one. $( '# blogerrorlogs-data-table ' ).remove();