ajax.reload 第二次不起作用

Question

我在mu MVC应用程序中使用数据表，每次通过模型弹出窗口编辑任何记录时，我都想刷新我的表。

它

仅适用于一个 repord，当我第二次打开模型弹出窗口以编辑相同/其他记录时，它不起作用。

请帮忙，这是我的代码。

    <div class="tablecontainer">
    <table id="schoolsTable" class="table table-bordered table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th>
                    Status
                </th>
                <th>
                    Code
                </th>
                <th>
                    Name
                </th>
                <th>
                    Address
                </th>
                <th>
                    Actions
                </th>
            </tr>
        </thead>
    </table>
</div>
    <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css">
@section Scripts{
    <script src="~/Content/datatables/datatables.min.js"></script>
    <script src="assets/lib/jquery/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.6/js/jquery.tablesorter.min.js"></script>

    <script>
        $(document).ready(function () {
           var oTable = $('#schoolsTable').DataTable({
                "ajax": {
                    "url": "/School/viewschool",
                    "type": "Get",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Mas_SchoolStatusID", "autowidth": true },
                    { "data": "SchoolCode", "autowidth": true },
                    { "data": "SchoolName", "autowidth": true },
                    { "data": "SchoolAddress", "autowidth": true },
                    {
                        "data": "Mas_SchoolID", "width": "50px", "render": function (data) {
                            return '<a class="popup" href=/School/Edit/' + data +'>Edit</a>';
                        }
                    }
                ]
            });
            $('.tablecontainer').on('click', 'a.popup', function (e) {
                e.preventDefault();
                OpenPopup($(this).attr('href'))
            })
            function OpenPopup(pageUrl)
            {
                var $pageContent = $('<div/>');
                $pageContent.load(pageUrl);
                $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                        .html($pageContent)
                        .dialog({
                            dragable: false,
                            autoOpen: false,
                            resizeable: false,
                            model: true,
                            title: 'Popup Dialog',
                            height: 550,
                            width: 600,
                            close: function () {                                
                                $dialog.dialog('distroy').remove();
                            }
                        })                
                $('.popupWindow').on('submit', '#popupForm', function (e) {
                    var url = $('#popupForm')[0].action;
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $('#popupForm').serialize(),
                        success: function (data) {
                            if (data.status) {
                                oTable.ajax.reload();                          
                                $dialog.dialog('close');                              
                            }
                        }
                    })
                    e.preventDefault();
                })
                $dialog.dialog('open');
            }
        });
    </script>
    }

Answer 1

我在 destroy in close function as distroy 中拼写错误。

close: function () {                                
                   $dialog.dialog('distroy').remove();
                   }

应该是：

close: function () {                                
                   $dialog.dialog('destroy').remove();
                   }