CODEWITHSUNDEEP
jqueryajaxasp.net-mvcentity-frameworkpagination
user8224561
user8224561

Reputation:

how to fetch limited record on ajax request

I have 10,000 records in my database. I have used AJAX to fetch records. I am getting 10,000 records in JSON, but I want it to fetch the first 100 records then on next request another 100 and so on.

I have applied slice method but it is not working for condition type. I want to apply paging but I am not getting like how to apply paging on it.

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

Upvotes: 0

Views: 1962

Answers (1)

Basanta Matia
Basanta Matia

Reputation: 1562

This is how I did,

First time load:

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
     }
   }
 });

On Page Number click:

$(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
        }
      }
    });
   });

Then in your Action Method, you can retrive the value of query string, for example,

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

Then You can add Skip and Take method in your Linq or Entity Framework query, for example,

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

Note: Please change the CSS or HTML accordingly as your requirement. For example, BG color of your Ul, or clicked Li color, or enable disable li etc etc.

Hope it helps :)

Upvotes: 1

Related Questions