First Last

First Last

  • 1.5k
  • 613
  • 40.1k

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

Feb 26 2021 11:45 PM
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": 
  1. @model GbngWebClient.Models.BlogErrorLogForMaintListVM  
  2.   
  3. <h2 class="page-header">Error Log Maintenance</h2>  
  4.   
  5. @* For the error message returned as JSON. *@  
  6. <div>  
  7.     @* Hidden as display = "none". *@  
  8.     <p class="alert alert-danger" id="jsonErrorMessage" style="display:none"></p>  
  9. </div>  
  10.   
  11. <br />  
  12.   
  13. <div class="row">  
  14.     <div class="col-md-12">  
  15.         <div class="panel">  
  16.              <div>  
  17.                 <input type="radio" id="notresolved" value="notresolved" checked>  
  18.                 <label for="notresolved">Errors Not Resolved</label>  
  19.             </div>  
  20.             <div>  
  21.                 @* Default as checked. *@  
  22.                 <input type="radio" id="resolved" value="resolved">  
  23.                 <label for="resolved">Errors Resolved</label>  
  24.             </div>  
  25.         </div>  
  26.   
  27.         <br />  
  28.   
  29.         <div class="panel panel-primary list-panel" id="list-panel">  
  30.             <div class="panel-heading list-panel-heading">  
  31.                 <h1 class="panel-title list-panel-title">List of Error Logs</h1>  
  32.             </div>  
  33.   
  34.             <br />  
  35.   
  36.             <div class="panel-body">  
  37.                 <div style="overflow-x:auto; width:100%">  
  38.                     <table id="blogerrorlogs-data-table" class="table table-striped table-bordered" style="width:100%"></table>  
  39.                 </div>  
  40.             </div>  
  41.         </div>  
  42.     </div>  
  43. </div>  
  44.   
  45. @Scripts.Render("~/bundles/datatables")  
  46. @Scripts.Render("~/Content/datatables")  
  47. @Scripts.Render("~/bundles/jqueryval")  
  48. @Scripts.Render("~/bundles/jquery")  
  49. @Scripts.Render("~/bundles/bootstrap")  
  50. @Styles.Render("~/Content/css")  
  51.   
  52. <script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js" referrerpolicy="origin"></script>  
  53.   
  54. @section Scripts  
  55. {  
  56.     <script type="text/javascript">  
  57.   
  58.         // Declare the datatable ViewModel.  
  59.         var blogErrorLogListVM;  
  60.   
  61.         // Initial start up.  
  62.         $(function () {  
  63.             LoadJqueryTable();  
  64.         });  
  65.   
  66.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  67.         // The 'resolved' radio button click event handler.  
  68.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  69.         $('#resolved').on('click', function () {  
  70.             // Call the BlogErrorLogMaint controllers action method to set the session variable.  
  71.             $.ajax({  
  72.                 type: "POST",  
  73.                 url: "/BlogErrorLogMaint/SetBooleanSessionVar",  
  74.                 data: { value: true }, // Boolean true. Note: cannot be True.  
  75.                 datatype: "json",  
  76.                 traditional: true,  
  77.                 success: function (data) {  
  78.                      $("#notresolved").prop("checked", false);  
  79.   
  80.                     $('#jsonErrorMessage').remove();  
  81.   
  82.                     // Destroy the prior created jQuery table.  
  83.                     DestroyJqueryTable();  
  84.   
  85.                     // Load the jQuery table for the radio button selection made.  
  86.                     LoadJqueryTable();  
  87.                 }  
  88.             });  
  89.         });  
  90.   
  91.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  92.         // The 'not resolved' radio button click event handler.  
  93.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  94.         $('#notresolved').on('click', function () {  
  95.             // Call the BlogErrorLogMaint controllers action method to set the session variable.  
  96.             $.ajax({  
  97.                 type: "POST",  
  98.                 url: "/BlogErrorLogMaint/SetBooleanSessionVar",  
  99.                 data: { value: false },  // Boolean false. Note: cannot be False.  
  100.                 datatype: "json",  
  101.                 traditional: true,  
  102.                 success: function (data) {  
  103.                     $("#resolved").prop("checked", false);  
  104.   
  105.                     $('#jsonErrorMessage').remove();  
  106.   
  107.                     // Destroy the prior created jQuery table.  
  108.                     DestroyJqueryTable();  
  109.   
  110.                     // Load the jQuery table for the radio button selection made.  
  111.                     LoadJqueryTable();  
  112.                 }  
  113.             });  
  114.         });  
  115.           
  116.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  117.         // Destroy the jQuery datatable.  
  118.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  119.         function DestroyJqueryTable() {  
  120.             blogErrorLogListVM = {  
  121.                 destroy: function () {  
  122.                     dt = $('#blogerrorlogs-data-table').DataTable({  
  123.                         "destroy": true  
  124.                     });  
  125.                 }  
  126.             }  
  127.   
  128.             // Destroy the datatable.  
  129.             blogErrorLogListVM.destroy();  
  130.         }  
  131.           
  132.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  133.         // Load the jQuery datatable.  
  134.         //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
  135.         function LoadJqueryTable() {  
  136.             blogErrorLogListVM = {  
  137.                 dt: null,  
  138.   
  139.                 init: function () {  
  140.                     dt = $('#blogerrorlogs-data-table').DataTable({  
  141.                         "serverSide": true,   // For processing server-side.  
  142.                         "processing": true,   // For showing the progress bar.  
  143.                         "ajax": {  
  144.                             "url": "@Url.Action("GetBlogErrorLogsForMaintList", "BlogErrorLogMaint")",  
  145.                             "dataType": "json",  
  146.                             "data": function (data) {},  
  147.                             "error": function (error) {  
  148.                                  $("#jsonErrorMessage").text(error.responseJSON.ErrorMessage);  
  149.                                  $("#jsonErrorMessage").css("display", "block");  
  150.                             }  
  151.                     },  
  152.                         "columns": [  
  153.                             {  
  154.                                   "title": "Actions",  
  155.                                    "data": "BlogErrorLogId",  
  156.                                    "searchable": false,  
  157.                                    "sortable": false,  
  158.                                    "render": function (data, type, row, full, meta) {  
  159.                                        // Hyper links that will navigate to the views - it calls the controllers action passing the row's ‘blogErrorLogId’ to pull  
  160.                                        // the information for it and display in the modals herein - partial views.  
  161.                                        // - Builds the query string per hyper link.  
  162.                                        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>';  
  163.                                 }  
  164.                             },  
  165.                             { "title": "Log Date", "data": "LogDateTime", "searchable": true },  
  166.                             { "title": "User Name", "data": "UserName", "searchable": true },  
  167.                             { "title": "Message Type", "data": "MessageType", "searchable": true },  
  168.                             { "title": "Log Message", "data": "LogMessage", "searchable": true },  
  169.                             { "title": "Resolved Switch", "data": "ResolvedSwitch", "searchable": true },  
  170.                             { "title": "Resolved Date", "data": "ResolvedDateTime", "searchable": true },  
  171.                         ],  
  172.                         "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],  
  173.                     });  
  174.                 }  
  175.             }  
  176.   
  177.             // Initialize the datatable.  
  178.             blogErrorLogListVM.init();  
  179.         }  
  180.   
  181.      </script>  
  182. }  
 
 

Answers (8)