Server side pagination and search about gridjs HOT 7 CLOSED

pagination: {
enabled: true,
limit: 10,
server: {
url: (prev, page, limit) => ${prev}${prev.includes('?') ? '&' : '?'}limit=${limit}&offset=${page * limit}
},
summary: true,
},

This is how I fixed the bug when not performed search initially

from gridjs.

Hey @Naravyb

Grid.js calls your server configurations one by one and the prev in your url function is the URL of the previous step. In other words, you have a base URL here:

const grid = new Grid({
  columns: ['Title', 'Director', 'Producer'],
  server: {
    url: 'https://swapi.dev/api/films/',
    then: data => data.results.map(movie => 
      [movie.title, movie.director, movie.producer]
    )
  } 
});

which is https://swapi.dev/api/films/, then you have the search module:

const grid = new Grid({
  search: {
    server: {
      url: (prev, keyword) => `${prev}?q=${keyword}`
    }
  }
  // ...
});

and prev is your base URL in this case since you don't have any other server components. Then, let's say you have a pagination module:

const grid = new Grid({
  pagination: {
    limit: 5,
    server: {
      url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
    }
  },
  // ...
});

Now, prev is actually the URL returned from your search module (the search.server.url function) and you should NOT use ? to append the pagination querystring to your URL and & should be used (because search module already appended the ?q= querystring.

This is the simplified workflow:

1. https://swapi.dev/api/films
2. https://swapi.dev/api/films?q=<keyword>
3. https://swapi.dev/api/films?q=<keyword>&limit=5&offset=10

This is the order of pipeline steps: https://github.com/grid-js/gridjs/blob/master/src/pipeline/processor.ts#L6-L16 and also make sure to read https://gridjs.io/docs/server-side again.

Note: Grid.js sends the final HTTP request once and when all pipeline steps are executed.

from gridjs.

Hmm that's okay, I already implemented it. But I get it again when adding & pagination urls.
Look this

I also tried this on the gridjs.io website for testing. but why does he keep having errors?

thank u

from gridjs.

while I use code like this, but is there anything more efficient?

      search: {
            server: {
            url: (prev, keyword, page) => `${prev}?q=${keyword}&`
            }
        },
        pagination: {
            limit: 15,
            server: {
                url: (prev, page) => `${prev}?page=${page}`
            }
        },

and this produces the results as expected but what should be like this?

thank you 👍

from gridjs.

Try:

search: {
            server: {
            url: (prev, keyword, page) => `${prev}?q=${keyword}`
            }
        },
        pagination: {
            limit: 15,
            server: {
                url: (prev, page) => `${prev}&page=${page}`
            }
        },

from gridjs.

The hacky ${prev}?q=${keyword}& does work.

The ${keyword} contains {query}?limit=20&offset=1 which will become http://domain.dev?q=query?limit=20&offset=1 (doubled "?")

Maybe its a bug in concatenation?

from gridjs.

So what the exact solution here?

from gridjs.