数据表仅第一次工作答案

【问题标题】：datatable only working for the first time数据表仅第一次工作
【发布时间】：2017-10-09 09:36:53
【问题描述】：

 function SearchUser(url, pageIndex) {

        var table;

            table = $('#UsersTable').DataTable({
                serverSide: true,
                retrieve:true,
                ajax: {
                    url: url,
                    type: "POST",
                    data: { username: $('#Username').val(), email: $('#Email').val(), companyID: $('#LifeCompanies').val(), page: pageIndex, isLocked: $('#Locked').is(':checked') }
                },
                columns: [
                    { "data": "UserId" },
                    { "data": "Username" },
                    { "data": "Email" },
                    { "data": "IsLockedOut" },
                    {
                        "render": function (data, type, full, meta) {
                            return '<span>wahoo</span>';
                        }
                    }
                ]
            });
               }

<div id="search">
    <h3>Search:</h3>
   @using (Html.BeginForm("Search","Admin"))
   {
        <div>

            <table width="500px">
                <thead>
                    <tr>
                        <td>Username:</td>
                        <td>@Html.TextBox("Username")</td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td>@Html.TextBox("Email")</td>
                    </tr>
                    <tr>
                        <td>Locked:</td>
                        <td>@Html.CheckBox("Locked")</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="searchForm">
                                @Html.Partial("SearchBuild")
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="button" value="Search" onclick="SearchUser('/UserManagement/admin/Search',0)"/></td>
                    </tr>
                </thead>
            </table>
        </div>
    }
</div>

您好，上面的代码使用了 datatables jquery 插件。

它似乎只在我第一次使用该功能时才有效。第二次，它似乎命中了 javascript，但从未从我的 mvc 控制器中检索任何数据。

但是，如果我使用destroy 而不是retrieve，它工作得非常好。

如果我不使用检索或销毁，我会收到“无法重新初始化表”错误。

该函数只是由我单击的按钮调用。

【问题讨论】：

同时显示您的document.ready 代码
你怎么调用函数SearchUser？

标签： datatables

【解决方案1】：

你需要修改你的代码来初始化你的表并单独重新加载它。

除非您销毁并重新创建表，否则无法通过 API 修改初始化选项。

您需要另一种方式来传递pageIndex 变量。例如，您可以创建一个 ID 为 PageIndex 的隐藏输入，并从中设置和检索值。

例如：

function initTable(url) {
    var table;

    table = $('#UsersTable').DataTable({
        serverSide: true,
        retrieve:true,
        ajax: {
            url: url,
            type: "POST",
            data: { 
                username: $('#Username').val(), 
                email: $('#Email').val(), 
                companyID: $('#LifeCompanies').val(), 
                page: $('#PageIndex').val(), 
                isLocked: $('#Locked').is(':checked') 
            }
        },
        columns: [
            { "data": "UserId" },
            { "data": "Username" },
            { "data": "Email" },
            { "data": "IsLockedOut" },
            {
                "render": function (data, type, full, meta) {
                    return '<span>wahoo</span>';
                }
            }
        ]
    });
}

要再次搜索，只需调用$('#UsersTable').DataTable().ajax.reload() API 方法即可。

如果 URL 在搜索之间发生变化，请改用 $('#UsersTable').DataTable().ajax.url(newurl).load() API 方法。

【讨论】：