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 : Отфильтрованные данные с записями, которые мы хотим показать пользователю.