jquery - 如何销毁 ASP.net MVC 视图上的现有 jQuery 表，然后重建它？

Question

在视图启动时，我创建了一个 jQuery 表。它代表我从数据库中检索到的一组“错误未解决”的错误。默认。相应的单选按钮被选中。

对于选定的单选按钮（在本例中为“错误已解决”单选按钮），我尝试销毁先前创建的数据表，然后针对按钮所代表的那种类型的“错误”重建它。

我收到一个弹出错误：

DataTables 警告：table id=blogerrorlogs-data-table - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3

我使用http://datatables.net/tn/3作为参考来销毁 jQuery 数据表，但它不起作用。

我究竟做错了什么？

---

这是视图的代码”

@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">

        var blogErrorLogListVM;

        // Initial start up.
        $(function () {
            LoadJqueryTable();
        });

        //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        // The 'resolved' radio button click event handler.
        //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        $('#resolved').on('click', function () {
            $.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 () {
            $.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>

}

标签： jqueryasp.net-mvcdatatables