DataTables — это плагин jQuery, который упрощает добавление нумерации страниц на веб-страницу.
Просто нужно добавить список записей, тогда он автоматически настроит данные и создаст разбиение на страницы с функцией поиска и сортировки.
Скачать и включить
- Скачайте Datatables отсюда.
- Включите
datatables.min.css
иdatatables.min.js
в раздел<head>
, а также включите библиотеку jQuery. - Вы также можете использовать CDN.
<!-- Datatable CSS --> <link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'> <!-- jQuery Library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Datatable JS --> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
HTML
Создайте таблицу с идентификатором CategoryGridDynamic и Html таблицы.
<table id="CategoryGridDynamic" class="table table-striped table-bordered" width="100%"> <thead> <tr> <th>نام</th> <th>توضیحات</th> <th>فعال/غیر فعال</th> <th>ویرایش / حذف / افزودن مدل</th> </tr> </thead> </table>
Java-скрипт
Добавьте его в Document Ready и укажите идентификатор таблицы в конфигурации таблицы данных.
$(document).ready(function() { table = $("#CategoryGridDynamic").DataTable({ processing: true, serverSide: true, language: { "sEmptyTable": "هیچ داده ای در جدول وجود ندارد", "sInfo": "نمایش _START_ تا _END_ از _TOTAL_ رکورد", "sInfoEmpty": "نمایش 0 تا 0 از 0 رکورد", "sInfoFiltered": "(فیلتر شده از _MAX_ رکورد)", "sInfoPostFix": "", "sInfoThousands": ",", "sLengthMenu": "نمایش _MENU_ رکورد", "sLoadingRecords": "در حال بارگزاری...", "sProcessing": "در حال دریافت ...", "sSearch": "جستجو:", "sZeroRecords": "رکوردی با این مشخصات پیدا نشد", "oPaginate": { "sFirst": "ابتدا", "sLast": "انتها", "sNext": "بعدی", "sPrevious": "قبلی" }, "oAria": { "sSortAscending": ": فعال سازی نمایش به صورت صعودی", "sSortDescending": ": فعال سازی نمایش به صورت نزولی" } }, ajax: { "url": "/Brand/Search", "type": "Post", "datatype": "json" }, columns: [ { "data": "title", "name": "عنوان" }, { "data": "description", "name": "توضیحات" }, { "render": function (data, type, row) { if (row.isActive) { return "<i class='fa fa-check' style='color:green;'></i>"; } else { return "<i class='fa fa-check' style='color:red;'></i>"; } } }, { "render": function (data,type, row) { return "<a class='btn' title='ویرایش' href='/Brand/Update?id=" + row.id + "'><i class='fa fa-edit' style='color: green;'></i></a>" + "<a class='btn' title='حذف' onclick='deleteitem(" + row.id +")'><i class='fa fa-remove' style='color: red;'></i></a> " + "<a class='btn' title='مدل' href='/Model/Index?brandId=" + row.id +"'><i class='fa fa-plus' style='color: cornflowerblue;'></i></a>"; } }, ] }); });
Вы можете изменить конфигурацию языка и добавить столбец кнопок для отображения и добавить функции JavaScript.
Перезагрузить таблицу данных
$("#CategoryGridDynamic").DataTable().ajax.reload();
Реализация на стороне сервера
[HttpPost] public async Task<IActionResult> Search(int draw, int start, int length) { var searchValue = Request.Form["search[value]"].FirstOrDefault(); var resultList = await BrandTypeService.Search(new Core.SearchContext.SearchBrandCntx() { Title = searchValue, Description = "", Skip = 0, Take = 25, IsActive = true, }); return Ok(new { draw = draw, recordsTotal = resultList.TotalCount, recordsFiltered = resultList.Result.Count(), data = resultList.Result.ToList(), }); }
взамен Json у вас должно быть 3 элемента:
- recordsTotal: вы можете рассчитать все записи таблицы и добавить к этому свойству.
- recordsFiltered: вы можете рассчитать отфильтрованные данные и показать количество этих записей.
- data : Отфильтрованные данные с записями, которые мы хотим показать пользователю.