jquery - Jquery 数据表搜索和显示条目在我的表的左侧

问题描述

我在我的应用程序中创建了一个 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 sit 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 sit 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 sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore 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,

问候，卡萨克斯

标签： jquerydatatables

jquery - Jquery 数据表搜索和显示条目在我的表的左侧

问题描述

解决方案

推荐阅读