jQuery DataTable 在 mvc 中使用 WebGrid 实现多列搜索

Question

我正在使用 WebGrid 和 jQuery DataTable，但问题是并非 jQuery DataTable 的所有功能都能正常工作。

• 搜索功能仅限于当前页面
• 它只显示一页包含 10 条记录（记录总数： 50)
• 多列搜索不起作用甚至不可见。

请帮忙。谢谢:)

以下是DataTable的脚本：

$(document).ready(function () {
    var table = $('#webgrid').DataTable({
    "dom": "lfrti",         //to disable paging dropdown
    "bPaginate": false,     //to disable pagination
    "bInfo": false,         //to disable showing entries
    });

    $('#webgrid tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    // DataTable
    var table = $('#webgrid').DataTable();

    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.footer()).on('keyup change', function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });});

以下代码用于 WebGrid：

    @using (Html.BeginForm("Persons", "Welcome", FormMethod.Get, new {@class = "Search-form"}))
    {
    <div id="DivGrid">
    @{
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10,
        defaultSort: "Employee ID", columnNames: new[] { "Employee_ID", 
"First_Name", "Last_Name", "Date_Of_Birth" });
    if (Model.Count() > 0)
    {
        <div class="moveRight"><strong> @ViewBag.SearchParameter</strong> | @grid.TotalRowCount @Html.Label("Record(s) found")</div>

        @grid.GetHtml(tableStyle: "PGrid", headerStyle: "Header", alternatingRowStyle: "altRow", htmlAttributes: new { id = "webgrid" }, columns: grid.Columns(
                 grid.Column("Employee_ID", "Employee ID " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "Employee ID"),
            format: @<text>  <span class="display-mode grid-filter-btn">@item.Employee_ID </span>
            <label id="EmployeeID" class="edit-mode grid-filter-btn">@item.Employee_ID</label> </text>, style: "col2Width"),

            grid.Column("First_Name", "First Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "First_Name"), format: @<text>  <span class="display-mode">
                <label id="lblFirstName">@item.First_Name</label>
            </span> <input type="text" id="FirstName" value="@item.First_Name" class="edit-mode" name="firstname" data-col="firstname" /></text>, style: "col2Width"),

            grid.Column("Last_Name", "Last Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "Last_Name"), format: @<text> <span class="display-mode">
                <label id="lblLastName">@item.Last_Name</label>
            </span>  <input type="text" id="LastName" value="@item.Last_Name" class="edit-mode" name="lastname" data-col="lastname" /> </text>, style: "col2Width"),

            grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")), style: "DateOfBirth"),
            //grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")) ),
            grid.Column(header: "Action", canSort: false, style: "action", format: @<text>
                <button class="edit-user display-mode glyphicon glyphicon-edit"> Edit</button>
                <button class="display-mode delete-item glyphicon glyphicon-trash"> Delete</button>
                <button class="save-user edit-mode glyphicon glyphicon-save"> Save</button>
                <button class="cancel-user edit-mode glyphicon glyphicon-remove-sign"> Cancel</button></text>)));
    }
    else
    {
        <hr />@Html.Label("No, Record(s) not found")<<hr />
    }
        }
    </div>}

Answer 1

搜索功能仅限于当前页面 您的 webgrid 已对您的数据表进行了分页 只显示一页包含 10 条记录（记录总数：50） 您的 webgrid 每页属性有 10 行 多列搜索不起作用甚至不可见。 https://datatables.net/examples/api/multi_filter.html

试试

var grid = new WebGrid(source: Model, canPage: false,

Answer 2

数据表脚本代码：

var oTable;
var asInitVals = new Array();

$(document).ready(function () {
    oTable = $('#webgrid').dataTable({
        "oLanguage": {
            "sSearch": "Search all columns:"
        }
    });

    $("tfoot input").keyup(function () {
        /* Filter on the column (the index) of this element */
        oTable.fnFilter(this.value, $("tfoot input").index(this));
    });
    /*
     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
     * the footer
     */
    $("tfoot input").each(function (i) {
        asInitVals[i] = this.value;
    });
});

WebGrid 代码：

 @grid.Table(tableStyle: "PGrid", headerStyle: "Header", footerStyle: "Footer", alternatingRowStyle: "altRow", htmlAttributes: new { id = "webgrid" }, columns: grid.Columns(
                 grid.Column("Employee_ID", "Employee ID",
            format: @<text>  <span class="display-mode grid-filter-btn">@item.Employee_ID </span>
            <label id="EmployeeID" class="edit-mode grid-filter-btn">@item.Employee_ID</label> </text>, style: "col2Width"),

            grid.Column("First_Name", "First Name", format: @<text>  <span class="display-mode">
                <label id="lblFirstName">@item.First_Name</label>
            </span> <input type="text" id="FirstName" value="@item.First_Name" class="edit-mode" name="firstname" data-col="firstname" /></text>, style: "col2Width"),

            grid.Column("Last_Name", "Last Name", format: @<text> <span class="display-mode">
                <label id="lblLastName">@item.Last_Name</label>
            </span>  <input type="text" id="LastName" value="@item.Last_Name" class="edit-mode" name="lastname" data-col="lastname" /> </text>, style: "col2Width"),

            grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")), style: "DateOfBirth"),
            grid.Column(header: "Action", canSort: false, style: "action", format: @<text>
                <button class="edit-user display-mode glyphicon glyphicon-edit"> Edit</button>
                <button class="display-mode delete-item glyphicon glyphicon-trash"> Delete</button>
                <button class="save-user edit-mode glyphicon glyphicon-save"> Save</button>
                <button class="cancel-user edit-mode glyphicon glyphicon-remove-sign"> Cancel</button></text>)));
        <table class='container'>
            <tfoot class='filters multipleSearch col-md-12'>
                <tr>
                    <th class="txtBoxWidth">
                        <input class='txtBox1 ' placeholder='Employee Id' />
                    </th>
                    <th class="txtBoxWidth">
                        <input class='txtBox2 ' placeholder='First Name' />
                    </th>
                    <th class="txtBoxWidth">
                        <input class='txtBox3 ' placeholder='Last Name' />
                    </th>
                    <th class="txtBoxWidth">
                        <input class='txtBox4 ' placeholder='Date of Birth' />
                    </th>
                    <th>

                    </th>
                </tr>
            </tfoot>
        </table>