jsGrid preload pages ahead

Question

Я хочу загружать элементы за страницей, так как у меня есть таблицы с большим количеством данных, но я не хочу загружать элементы для каждой страницы, как только пользователь нажимает на нее. Вместо этого я предпочитаю предварительно загружать 1000 элементов (например) вперед и получать только больше результатов, если пользователь переместится на страницу, на которую я еще не получал данные. Возможно ли это?

Answer 1

Я нашел способ решить эту проблему.

Вот основная логика:

1. Создать локальный объект кэша данных, который будет содержать массивы результатов для каждой страницы.
2. При извлечении данных с сервера всегда возвращайте данные на несколько страниц вперед и сохраняйте их в локальном объекте кэша
3. Напишите метод для controller.loadData, который будет проверять, есть ли у вас желаемая страница результатов локальный объект кеша, если это так - верните этот массив, если нет - верните обещание, которое будет получать результаты с некоторыми дополнительными данными на несколько страниц вперед.

Пример локального объекта кэша снимка:

{ 
    "1": [{name: "ff"}, {name: "fdd"}], 
    "2": [{name: "fds"}, {name: "dsr"}], 
    "3": [{name: "drr"}, {name: "ssr"}] 
} 

Answer 2

раздел сценария

<script type="text/javascript"> 
    $(document).ready(function() { 
     List(); 
    }); 
    function List() { 
     //$(function() { 
     loadjsgrid(); 
     $("#jsGrid").jsGrid({ 
      height: "auto", 
      width: "100%", 
      filtering: true, 
      editing: false, 
      sorting: true, 
      autoload: true, 
      paging: true, 
      pageSize: 10, 
      pageButtonCount: 5, 
      pageLoading: true, 
      controller: { 
       loadData: function (filter) { 
        var startIndex = (filter.pageIndex - 1) * filter.pageSize; 
        var d = $.Deferred(); 
        $.ajax({ 
         type: 'GET', 
         url: '@Url.Action("[ActionName]", "[Controllername]")', 
         data: filter, 
         contentType: 'application/json; charset=utf-8', 
         dataType: 'json', 
         success: function (data) { 
          if (data.Message == "Failed") { 
           data.Result = []; 
           data.Count = 0; 
          } 
          console.log(data); 
          d.resolve(data); 
         } 
        }); 
        return d.promise().then(function (q) { 
         return { 
          data: q.Result, 
          itemsCount: q.Count 
         } 
        }); 


       } 
      }, 


      }, 
      fields: [ 

       { name: "rct_no", type: "text", title: 'Serial Number', autosearch: true, width: '10%' } 

      ], 

     }); 
     $("#pager").on("change", function() { 
      var page = parseInt($(this).val(), 10); 
      $("#jsGrid").jsGrid("openPage", page); 
     }); 
    } 

секция Controller

public ActionResult getList(int pageIndex = 1, int pageSize = 10) 
     { 
      try 
      { 

       var query = @" from rd_receipt_header 
       var irList = DAL.db.Fetch<[className]>(pageIndex, pageSize, @"select * " + query); 
       var count = DAL.db.ExecuteScalar<int>("select count(*) " + query); 
       return Json(new { Message = "Success", Result = irList, Count = count }, JsonRequestBehavior.AllowGet); 
      } 
      catch (Exception ex) { return Json(new { Message = "Failed", Result = ex.Message }, JsonRequestBehavior.AllowGet); } 

Я использую Ajax для получения данных с сервера в формате АЯКС