Итак, у меня есть эта таблица, которую я структурировал следующим образом
<table id="foo-filtering" class="table table-bordered table-hover toggle-circle" data-page-size="7">
<thead>
</thead>
<tbody>
<partial name="_Item" />
</tbody>
<tfoot>
<tr>
<td colspan="5">
<div class="ft-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
А вот частичное представление
@foreach (var item in Model)
{
<tr>
<td>
<nav aria-label="Page navigation example">
<div class="container-1">
<div class="box-img">
<img src="@item.ProductImage" />
</div>
<div class="body">
<h3>@item.ItemName</h3>
<p>@item.SubTitle</p>
</div>
<div class="box-button">
<p>@item.SKU</p>
</div>
<div class="box-button">
<p class="mt-3 mr-2">$@item.Price</p>
<button class="btn btn-primary">Export</button>
</div>
</div>
</nav>
</td>
</tr>
}
И то, как я получаю элементы, проверка базы данных на предмет элементов, принадлежащих этому пользователю. Обратите внимание, что я возвращаю значение null, это важно. 0,5 секунды, просто чтобы, если я удалю элемент, он обновит представление.
<script type="text/javascript">
$(document).ready(function () {
setInterval(CheckAvailability, 500);
});
function CheckAvailability() {
$.ajax({
type: "POST",
url: "/Dashboard/CheckChange",
contentType: "application/json; charset=utf-8",
dataType: "json",
mimeType: "text/html",
success: function (response) {
if (response) {
$('.items').load("/Dashboard/ReturnItems");
console.log("Updated!");
}
else {
console.log("Failed!");
}
}
});
};
</script>
Вот проблема ... Сейчас он отлично работает, таблица выглядит так, как предполагалось, вы можно без проблем перелистывать страницы .. Однако! Если бы я удалил что-то из базы данных, это не обновило бы частичное представление. Даже если я изменю return null;
на return PartialView("_Item", Items);
, я считаю, что это потому, что я не добавил css класс items
в таблицу, но если я это сделаю, таблица не будет выглядеть нормально, все элементы будут отображаться в одной строке без разбивки на страницы et c.