Question

 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而不是检索它就可以完美地运行。

如果我不使用检索或销毁，我会得到＆＃34;无法重新初始化表格＆＃34;错误。

只需点击一下按钮即可调用该功能。

Answer 1

您需要修改代码以初始化表格并单独重新加载。

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

您需要另一种方式来传递pageIndex变量。例如，您可以创建标识为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方法。

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

数据表仅在第一次工作

1 个答案: