ajaxリクエストで制限付きレコードを取得する方法

Question

私のデータベースには10,000レコードあります。私はAJAXを使用してレコードを取得しました。私はJSONで10,000レコードを取得していますが、最初に100個のレコードを取得してから、次の100個を別に要求するなどしてください。

スライスメソッドを適用しましたが、条件タイプでは機能しません。私はページングを適用したいが、私はそれにページングを適用するようになっていない。

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

Answer 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クエリで

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

を方法を取るノートを追加することができます。必要に応じてCSSまたはHTMLを変更してください。たとえば、あなたのUIの、BG色、またはLiの色をクリック、または無効に李を有効にするなどなど

は、それはあなたがサーバー上でページングを行う必要があります:)