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