JQuery可更新的搜索和显示条目位于我的表的左侧

Question

我已经在我的应用程序中创建了一个Jquery数据表。呈现时，“搜索”和“显示条目”字段位于“我的表”的左侧，如下所示：

我的代码在这里：

@model IEnumerable<Exemptions.ViewModels.ViewModel>
@using PagedList.Mvc;
@{
    ViewBag.Title = "Index";
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

@Html.AntiForgeryToken()



@using (Html.BeginForm(new { @enctype = "multipart/form-data" }))
{
    if (ViewBag.Role == "Officer")
    {
        <div><h1>Please select a Report to view from the Reports Menu</h1></div>
    }
    else if (ViewBag.Role == "PermitAdmin" || ViewBag.Role == "Employee")
    {
        <table class="table" id="id" style="width:75%" border="0" align="center">
            <tr>
                <td colspan="7">
                    <h3>*Search for an Exemption or Create a new Exemption from this page:* </h3>
                    <p class="input-group row">
                        <label class="col-sm-1 col-form-label">
                            <input type="button" value="Create New Owner" class="btn btn-md btn-default " onclick="location.href='@Url.Action("Create", "Owners")'" />
                        </label>
                    </p>
                </td>
            </tr>
        </table>
        <table class="table" id="myTable" style="width:75%" border="1" align="center">
            <thead>
                <tr>
                    <th width="20%">
                        @Html.ActionLink("Land Owner ID", "Index", new { sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                    </th>
                    <th width="20%">
                        @Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.FNameLSortParam, currentFilter = ViewBag.CurrentFilter })
                    </th>
                    <th width="20%">
                        @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.LNameLSortParam, currentFilter = ViewBag.CurrentFilter })
                    </th>
                    <th width="30%">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    if (ViewBag.Role == "PermitAdmin")
                    {
                        <tr class="@(item.Owner.RecordDeleted ? "danger" : string.Empty) ">
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.LandOwnerID)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.FNameL)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.LNameL)
                            </td>
                            <td align="center">
                                @if (item.Owner.RecordDeleted == false)
                                {
                                    @Html.ActionLink("Edit Landowner", "Edit", new { id = item.Owner.LandOwnerID }) <span> | </span>
                                    @Html.ActionLink("Edit Exemption", "Index", "Permits", new { id = item.Owner.LandOwnerID }, null)
                                }
                                else
                                {
                                    <div>Record Deleted</div>
                                }
                                @if (ViewBag.Role == "PermitAdmin" && item.Owner.RecordDeleted == false)
                                {<span> | </span>@Html.ActionLink("Delete Landowner", "Delete", "Owners", new { id = item.Owner.LandOwnerID }, null)}
                            </td>
                        </tr>
                    }
                    else
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.LandOwnerID)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.FNameL)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Owner.LNameL)
                            </td>
                            <td align="center">
                                @Html.ActionLink("Edit Landowner", "Edit", new { id = item.Owner.LandOwnerID }) <span> | </span>
                                @Html.ActionLink("Edit Exemption", "Index", "Permits", new { id = item.Owner.LandOwnerID }, null)

                            </td>
                        </tr>
                    }

                }
            </tbody>
        </table>

    }
    else if (ViewBag.Role == "None")
    {
        <div>
            <h2>
                Error! You must be a member of the Officer, Employee, or PermitAdmin groups to view this data!<br />
                <br />Please contact <contact info> to be added to the appropriate group!
            </h2>
        </div>
    }
    else if (ViewBag.Role == "NoUserFound")
    {
        <div>
            <h2>
                Error! We could not find your record in our system!<br />
                <br />Please contact <contact info> to create your account!
            </h2>
            <p><img src="~/Content/images/wildhog.jpeg" /></p>
        </div>
    }

}

<script>
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

编辑添加：我希望搜索框和显示条目字段在我的表上方。

我需要做什么来解决这个问题？谷歌一点帮助都没有-(

显然，我无法发布此问题，因为与我的邮件文本相比，有太多的代码，因此我提前对此表示歉意：

忽视这一点；这是为了通过过滤器。

Sed ut perspiciatis unde omnis iste natus error sat voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illoinvente veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas 坐 aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est, qui dolorem ipsum quia dolor sat amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut laboure et dolore magnam aliquam quaerat voluptatem。 Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit Laboriosam, nisi ut aliquid ex ea commodi consequatur？ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil Molestiae consequatur, velillum qui dolorem eum fugiat quo voluptas nulla pariatur？

你好，Carthax

Answer 1

使用以下配置将搜索框移动到右下角：

$('table').DataTable({ "dom": '<"top"i>flrtp<"clear">' });

PS：“底部”flp表示过滤、长度更改和分页将位于底部。

l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class

参考：https://www.ihbc.org.uk/consultationsdb_new/examples/basic_init/dom.html