1. Home
  2. Forum
  3. Vue
  4. Server-side paging Vuejs example with many records on demand

Server-side paging Vuejs example with many records on demand

I need to make the paging work remotely, that is, imagine that I have a table with 100,000 records and I want to page every 10 records, except that I want to make the frontend request only every 10 records for my REST api of the type GET.

I'm having trouble understanding and interpreting what to use. I would like to quote an example assuming that my URL is as follows:

http://localhost:3000/v2/crud/acesso-grupos?descricao.contains=A&sort=id%20desc

Type should come from the server 10 records per page, but the frontend will need to interpret that it has x pages and on each subsequent page bring 10 more records and so on.

In my API, the structure that results is as follows:

{
  "success": true,
  "message": "",
  "data": {
    "limit": 10,
    "page": 1,
    "total_pages": 2,
    "sort": "id desc",
    "total_rows": 11,
    "first_page": "/v2/crud/acesso-grupos?limit=10&page=1&sort=id desc&descricao.contains=A",
    "previous_page": "",
    "next_page": "/v2/crud/acesso-grupos?limit=10&page=2&sort=id desc&descricao.contains=A",
    "last_page": "/v2/crud/acesso-grupos?limit=10&page=2&sort=id desc&descricao.contains=A",
    "from_row": 1,
    "to_row": 10,
    "rows": [
      {
        "id": 9,
        "descricao": "Estoquista",
        "ativo": "S"
      },
      {
        "id": 8,
        "descricao": "Logistica",
        "ativo": "S"
      },
      {
        "id": 7,
        "descricao": "Faturamento",
        "ativo": "S"
      },
      {
        "id": 6,
        "descricao": "Comprador",
        "ativo": "S"
      },
      {
        "id": 5,
        "descricao": "Marketing",
        "ativo": "S"
      },
      {
        "id": 4,
        "descricao": "Financeiro",
        "ativo": "S"
      },
      {
        "id": 1,
        "descricao": "Administrador",
        "ativo": "S"
      }
    ],
    "searchs": [
      {
        "column": "descricao",
        "action": "contains",
        "query": "A"
      }
    ]
  }
}


Could you help me? I tried using DataManager, but I don't know if I'm on the right track.

3 Replies 1 reply marked as answer
AG Ajith Govarthan Syncfusion Team September 9, 2020 01:59 PM UTC

Hi Farnetani, 

Thanks for contacting Syncfusion support. 

Based on your requirement we suspect that you want to handle the pagination in the server side using the Rest API. By default in our EJ2 grid the server side pagination is handled based on the skip and take values sent from the grid component. 

When you use Web API adaptor and perform pagination will send the skip and take values to the server side based on the navigated page and the pageSize. Based on the skip and take values we need to return the records  to grid component in the form of Items and Count. 

For your convenience we have attached the documentation and code example so please refer them for your reference. 

Code example: 
Serverside: 
 
public class OrderController : ApiController 
    { 
        // GET: api/Order 
        public object Get() 
        { 
             
            var queryString = System.Web.HttpContext.Current.Request.QueryString; 
            int skip = Convert.ToInt32(queryString["$skip"]); //paging 
            int take = Convert.ToInt32(queryString["$top"]); 
            string filter = queryString["$filter"]; // filtering  
            string sort = queryString["$orderby"]; // sorting  
            var data = OrdersDetails.GetAllRecords();       
             
            return new 
            { 
                Items = data.Skip(skip).Take(take), 
                Count = data.Count() 
                //  return order; 
            }; 
        } 
        // GET: api/Order/5 
       // [HttpGet("{id}", Name = "Get")] 
        public object Get(int id) 
        { 
            var queryString = System.Web.HttpContext.Current.Request.QueryString; 
            var dataa = Convert.ToString(queryString["id"]); 
            var data = OrdersDetails.GetAllRecords().Where(user => user.CustomerID == dataa).ToList(); 
            return new { Items = data, Count = data.Count() }; 
        } 
 
        // POST: api/Order 
       [HttpPost] 
        public object Post([FromBody]OrdersDetails value) 
        { 
            OrdersDetails.GetAllRecords().Add(value); 
            var Data = OrdersDetails.GetAllRecords().ToList(); 
            int count = Data.Count(); 
            return Json(new { result = Data, count = count }); 
        } 
 
        // PUT: api/Order/5 
        [HttpPut] 
        public object Put([FromBody]OrdersDetails value) 
        { 
            var ord = value; 
            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.ShipCity = ord.ShipCity; 
            return value; 
        } 
 
        // DELETE: api/Order/5 
        public object Delete(int id) 
        { 
            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 
            return Json(id); 
        } 
} 



Screenshots: 
 

 

UG-links: 


Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


Marked as answer
FA farnetani September 9, 2020 02:32 PM UTC

Thanks a lot, your support is excellent, congratulations!


AG Ajith Govarthan Syncfusion Team September 10, 2020 02:20 PM UTC

Hi farnetani, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


Loader.
Up arrow icon