gridjs icon indicating copy to clipboard operation
gridjs copied to clipboard

Pagination doesn't reset properly when using server-side search, order & pagination and resetPageOnUpdate=true

Open rm-code opened this issue 5 months ago • 1 comments

Describe the bug When using server side data handling, I get inconsistent results with pagination, especially when changing search terms, but also when the sort order changes.

As far as I can tell this happens, because pagination does not automatically / correctly reset, when the "search" or "sorting" state changes even though the resetPageOnUpdat option is set to true.

This is my code for the three different "features" - maybe I'm missing something here:

      search: {
        server: {
          url: (prev, keyword) => {
            let connector = prefixUrl(prev);
            return `${prev}${connector}Filter=${keyword}`;
          }
        }
      },
      sort: {
        multiColumn: false,
        server: {
          url: (prev, selectedColumns) => {
            if (!selectedColumns.length) {
              return prev;
            }

            const column = selectedColumns[0];
            const columnName = columns[column.index].id;
            const ascending = column.direction === 1;

            let connector = prefixUrl(prev);
            return `${prev}${connector}order=${columnName}&ascending=${ascending}`;
          }
        }
      },
      pagination: {
        limit: 10,
        resetPageOnUpdate: true,
        server: {
          url: (prev, page, limit) => {
            console.log("Pagination", prev);
            let connector = prefixUrl(prev);
            return `${prev}${connector}pageSize=${limit}&pageNumber=${page}`;
          }
        }
      },

Behaviour

Sort order

Initial state. 415 results, page 1, Ascending order image

Jumping to the last page. image

Changing sort order (notice how gridjs says that we are on the first page, but it only displays 5 items as if we still were on the last page). image

Jumping back to the last page. The state of the table doesn't change. It now is "where it should be". image

Jumping back to the first page. Now we have the right result. Changed sort order and the correct results for the first page. image

Search filter

When filtering it is even worse. I started at the last page (page 42 with 415 results) and entered a search term. The backend only returns 8 items, but in the request with the changed search parameter gridjs "still" tells the backend to return page 42... I expect it to send page 0 to the backend when the search term has changed. image

Expected behavior Pagination values should reset to the default / first page, when the state of the "search" or "order" features changes between calls when "resetOnPageUpdate" is set to true.

rm-code avatar Jan 17 '24 12:01 rm-code