We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Paginate with Web API

I am trying to do searching and pagination with a Web API that is not mine, i have the basic working for it to talk, but when want to paginate I need to use different GET params than what Vue is sending.  When someone presses Page two, I need to get to: example.com/api/data?page=2&items=15

How do I jimmy that into this please, and ad a bonus, how do i also do something like this:  example.com/api/data?page=2&items=15 &name=test

export default({

  data() {
    return {
      data: new DataManager({
        url: 'example.com/api/data',
        adaptor: new WebApiAdaptor(),
        crossDomain: true
  provide: {
    grid: [Page]

3 Replies

PS Pavithra Subramaniyam Syncfusion Team March 27, 2023 03:31 AM UTC

Hi Verum Genus,

Thanks for contacting Syncfusion support.

By default, the WebApiAdaptor will send top and skip parameters for pagination. If you want to customize these parameters in your API request, then we suggest the “Custom Adaptor” feature which provides an option to override the default adaptor functions. Please refer to the below code example and documentation link for more information.

class customAdaptor extends WebApiAdaptor {  //extend the WebApiAdaptor

  processQuery() {

    // Executing base class processQuery function

    var original = super.processQuery.apply(this, arguments);


    // Here you can customize the 'original' request as per your need and return it

    return original;



.  .  .

export default ({


  data() {

    return {

      data: new DataManager({

        url: 'example.com/api/data',

        adaptor: new customAdaptor(),

        crossDomain: true




  provide: {

    grid: [Page]





Please get back to us if you need further assistance on this.


Pavithra S

VG Verum Genus replied to Pavithra Subramaniyam March 27, 2023 04:42 AM UTC

Hello Pavithra, I saw this, but I was not sure how to get from a Grid action like Pagination, Sort, Search, Filter to a customAdaptor request.  Do you have a example of something like this?


PS Pavithra Subramaniyam Syncfusion Team March 30, 2023 05:36 PM UTC

Hi Verum Genus,

We could not get the current Grid action inside the CustomAdaptor. However, we can identify the actions using parameters which is passed to the “processQuery” method. Please refer to the below parameter lists, its corresponding actions and screenshot.

  • skip, top - paging
  • orderby – sorting
  • filter – filtering, searching


Pavithra S

Live Chat Icon For mobile
Up arrow icon