Question

我有一个带有视图的MVC项目，该视图在加载视图时最初填充。该视图是搜索表单。表格中的每一行都有一个右侧的按钮，用于编辑帖子，您可以在模态窗口中打开一个单独的表单。通过模式窗体编辑帖子时，视图不会重新加载新的get。而是关闭模态窗体，再次调用函数Search以使用更新/更改的数据更新表。

现在问题。当我打开模态窗体后进行搜索 - 我甚至不必保存帖子，只需按下模态窗体上的取消按钮，然后单击搜索按钮 - 功能搜索在第一个内创建一个新的DataTable一个即可。基本表（行和列）被删除，但DataTables在初始化时添加到表中的内容仍然存在。所以现在我有分区和搜索的双重字段。如果我再次单击“搜索”，则会在前两个内部创建第三个数据表。等我每次搜索都是如此。而且，所有新数据表似乎都有与原始设置不同的设置。作为示例，“iDisplayLength”在原始表中为25，但在所有其他表中似乎设置为10.

Picture showing the problem, with a DataTable inside another DataTable

只要我不打开模态窗体，搜索功能就可以正常工作。

有人可以告诉我故障是什么，或者至少指出我的方向？我已经没有关于如何解决这个问题的想法，也不知道该怎么办了！

我的代码如下：

该表格写为：

<table id="searchResultTable" class="table table-hover">
    <thead>
        <tr>
            <th>
                Name:
            </th>

            <th>
                Category:
            </th>

            <th>
            </th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model.searchResult)
        {
            <tr>
                <td>
                    @item.name
                </td>

                <td>
                    @item.category
                </td>

                <td>
                    <a href="/Contacts/Contact_Edit?id=@item.contact_id" class="editPost">
                        <span class="glyphicons glyphicons-edit" title="Edit"></span>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>

我在桌面上初始化DataTables：

$(document).ready(function () {
    $('#searchResultTable').DataTable({
        stateSave: true,
        "sDom": '<lfr>t<<"col-xs-12 col-md-12"ip><B>>',
        bPaginate: true,
        "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
        "iDisplayLength": 25,
        "order": []
    });
});

在函数Search（）中，我执行JSON请求，该请求返回用于使用新数据再次填充表的数据。因此，当我进行搜索时，视图不会重新加载。

function Search() {
    $.get("/Contacts/Contact_Search?searchData=" + encodeURIComponent(SearchData())).done(function (data) {
        sr = JSON.parse(data)

        if (sr.success == true) {
            var resultList = sr.searchResult;
            var table = $("#searchResultTable").DataTable();

            table.clear();

            $.each(resultList, function (idx, elem) {
                var i = table.row.add(
                    [
                        elem.name,
                        elem.category,
                        "<a href='/Contacts/Contact_Edit?id=" + elem.contact_id + "' class='editPost'><span class='glyphicons glyphicons-edit' title='Edit'></span></a>"
                    ]);
            });

            table.draw();
        }
    }).fail(function (data) {
    });
};

模式表单由代码

打开

$(document.body).on('click', '.editPost', function (evt) {
    evt.preventDefault();

    var modal = $('#editPost').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if (textStatus === 'success' || textStatus === 'notmodified') {
                modal.show();
                $('#modalLoader').hide();
            }
        });
});

搜索按钮：

<button id="button_search" class="btn btn-default" onclick="Search();">Search</button>

我目前的DataTables版本是1.10.16，但我尝试过其他版本 - 所有版本都有相同的结果！

希望有人在那里帮助我！如果你是那个人，谢谢你的预付款！

/安德斯

在通过JSON

0 个答案: