如何在ajax请求中获取有限的记录答案

【问题标题】：how to fetch limited record on ajax request如何在ajax请求中获取有限的记录
【发布时间】：2017-12-04 05:00:26
【问题描述】：

我的数据库中有 10,000 条记录。我使用 AJAX 来获取记录。我在 JSON 中获得 10,000 条记录，但我希望它获取前 100 条记录，然后在下一次请求时再获取 100 条，依此类推。

我已经应用了切片方法，但它不适用于条件类型。我想应用分页，但我不知道如何对其应用分页。

$().ready(function(){
  $.ajax({
    url: "http://localhost:66252/Home/Getoptions", 
    success: function(result) { 
      //result has 10000 records 
    }
  });
});

【问题讨论】：

您需要在服务器上进行分页。 JS与问题无关。另请注意，$().ready 不是附加 document.ready 事件处理程序的有效方式。使用$(document).ready(fn) 或$(fn)
从您的数据库中仅获取 100 个。实现分页，根据页面获取记录。
@RoryMcCrossan 现在这是 Jquery 官方文档下提供的有效形式
不是这样的：learn.jquery.com/using-jquery-core/document-ready
另见：api.jquery.com/readyAs of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

标签： jquery ajax asp.net-mvc entity-framework pagination

【解决方案1】：

我就是这样做的，

首次加载：

var pageSize = 100; // See, this is my default page size. You can change it.
$.ajax({
url: "http://localhost:66252/Home/Getoptions", 
data:{ skip: 0, take:100 },
success: function(result) { 
  var total = result.length;
  if (total > pageSize) {  // pageSize is 100, we declared on top
     var pageTotal = Math.ceil(total / pageSize);
     var j;
     for (var i = 0; i < pageTotal; i++) 
     {
       j = i + 1;
       //Here I'm creating li for all the pages. You can create any number of li then create a button called Next. Pass the value in Next button.
       var pages = '<li class="_li"><a id="page_' + j + '" class="pageNumber" style="margin-left:0px;" href="javascript:;">' + (i + 1) + '</a></li>';
       $('#_ul').append(pages); //This is my id of Ul from HTML
     }
   }
 });

在页码上点击：

$(document).on("click", ".pageNumber", function () {        
    var value = $(this).attr('id').split('_')[1];
    var skip = value == 1 ? 0 : (value * pageSize) - pageSize;
    //Then call once again your ajax method here by passing skip value
    $.ajax({
      url: "http://localhost:66252/Home/Getoptions", 
      data:{ skip: skip, take:100 },
      success: function(result) { 
      var total = result.length;
      if (total > pageSize) {
        var pageTotal = Math.ceil(total / pageSize);
        var j;
        for (var i = 0; i < pageTotal; i++) 
        {
          j = i + 1;
          //Here I'm creating li for all the pages. You can create any number of li then create a button called Next. Pass the value in Next button.
          var pages = '<li class="_li"><a id="page_' + j + '" 
                       class="pageNumber" style="margin-left:0px;" 
                       href="javascript:;">' + (i + 1) + '</a></li>';
          $('#_ul').append(pages); //This is my id of Ul from HTML
        }
      }
    });
   });

然后在你的Action Method中，你可以检索查询字符串的值，例如，

string _skip = Request.QueryString["skip"];
string _take = Request.QueryString["take"];

然后您可以在 Linq 或 Entity Framework 查询中添加 Skip 和 Take 方法，例如，

var result = 
   myContext.GetData.Skip(int.Parse(_skip)).Take(int.Parse(_take)).ToList();
return json(result,jsonRequestBehaviour.AllowGet);

注意：请根据您的要求相应地更改 CSS 或 HTML。比如你Ul的BG颜色，或者点击的Li颜色，或者enable disable li等等。

希望对你有帮助:)

【讨论】：