Показать первые 10 строк при загрузке более 4000 строк из таблицы данных

Question

При загрузке страницы, содержащей более 4000 строк (из базы данных), браузер (IE, Firefox и Chrome) зависает до тех пор, пока не будут отображены все данные.В этот момент отображается таблица данных (из библиотеки jquery.dataTables.min.js), и браузер реагирует, и мои фильтры работают нормально.

Значения извлекаются непосредственно из базы данных

Есть ли способ избежать перехода браузера в режим "без ответа"?

Answer 1

Попробуйте подкачку на стороне сервера для DataTables.

1. Клиент

   <table id="example" class="display" style="width:100%">
       <thead>
           <tr>
               <th>Id</th>
               <th>Title</th>
               <th>Sku</th>
           </tr>
       </thead>
   </table>
   
   @section Scripts{
       <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
       <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
   
       <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
       <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
   
   
       <script type="text/javascript">
           $(document).ready(function () {
               $('#example').DataTable({
                   "processing": true,
                   "serverSide": true,
                   "lengthMenu": [[2, 4, 8, -1], [2, 4, 8, "All"]],
                   "ajax": {
                       url: "https://localhost:44376/api/product/products",
                       contentType: "application/json; charset=utf-8",
                   },
                   columns: [
                       {
                           data: "id",
                       },
                       {
                           data: "title"
                       },
                       {
                           data: "sku",
                       }
                   ]
               });
           });
       </script>
   }
   

2. Контроллер

   [HttpGet("Products")]
   public ResponseVM AllProducts(RequestVM request)
   {
       var count = _context.Products.Count();
       var data = _context.Products.Skip(request.Start).Take(request.Length).ToList();
       return new ResponseVM
       {
           Draw = request.Draw,
           RecordsTotal = count,
           RecordsFiltered = count,
           Data = data
       };
   }
   

3. Модели

   public class RequestVM
   {
       [FromQuery]
       public int Draw { get; set; }
       [FromQuery]
       public int Start { get; set; }
       [FromQuery]
       public int Length { get; set; }
   }
   public class ResponseVM
   {
       public int Draw { get; set; }
       public int RecordsTotal { get; set; }
       public int RecordsFiltered { get; set; }
       public object Data { get; set; }
   }