Я создал Jquery Datatable в моем приложении. Когда он рендерится, поля поиска и записи будут слева от моей таблицы, например:
Мой код здесь:
@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>
Редактировать, чтобы добавить: Я хотел бы, чтобы поле поиска и поля ввода отображались над моей таблицей.
Что мне нужно сделать, чтобы это исправить? Google не был полезен вообще. : - (
По-видимому, я не могу опубликовать этот вопрос, потому что слишком много кода по сравнению с текстом моего сообщения, поэтому я заранее извиняюсь за это:
Пропустить это, это чтобы пройти через фильтр.
Sed ut perspiciatis undemnis iste natus error sit vulptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta en vivo impimimamps. quia volptas sit aspernatur aut odit aut fu git, sed quia contquuntur magni dolores eos qui ratione volupetatem sequi nesciuscunt. ut labore et dolore magnam aliquam quaerat volptatem Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit labouriosam, nisi ut aliquid ex e selomisquéru ququitue qui aue ve vel eum iure preshendderit qui in e reglutate velit esse UAM Nihil Molestiae Conquatur, Vel Illum Qui Dolorem Eum Fugiat Quo Volptas Nulla Pariatur?
С уважением, Карфакс