Sliding Window Pagination + Local Filtering: Preventing Page Reset and Avoiding Extra Backend Queries

[Shreyanshsahu14]

Hi all,

I'm using Slickgrid-Universal . Here's my current setup:

On first load, a query fires with payload:
{
"startRow": 0,
"endRow": 200,
"reportType": "",
"title": "",
"valueCols": [],
"colDefs": [],
"filterModel": {},
"customFilterModel": {},
"sortModel": [],
"rowGroupCols": [],
"pivotCols": [],
"pivotMode": false,
"colState": [],
"colGroupState": [],
"groupKeys": []
}
Using sliding window pagination, the first load caches 1–200 records, split into 20 pages.

When navigating beyond 200 records, it fetches 100–300 records and adds them to the cache.
Problem:

I want to apply text filtering on a column without firing a backend query for every keystroke. Here's the behavior I'm seeing:

With useLocalFiltering: true:

I type, e.g., 'g' in a column filter while on page 6.

The page number resets to 1, but the dataset displayed corresponds to the filtered page 6.

The grid is visually inconsistent because pagination shows page 1 but rows reflect page 6 filtered data.

With useLocalFiltering: false:
There is no filtering of data.

What I want:

Prevent firing a backend query on every filter change.

Apply filters directly to the cached data.

Keep pagination consistent, i.e., page number should reflect the currently displayed filtered page.

Avoid the UI showing page 1 while displaying filtered results from a different page.
Additional Notes:

I'm already caching blocks of data using fetchAndCacheWindow(startRow, sortModel) with a window size of 200.

I’m updating dataset after applying the filter to blockCacheRef.current.

The challenge is to synchronize SlickGrid’s pagination component with the filtered dataset so that it doesn’t reset page numbers or misrepresent filtered rows.
Questions:

Is there a recommended pattern for filtering in a sliding window cache while keeping pagination consistent?

How can I apply filters locally without triggering backend queries, yet allow SlickGrid to correctly render pagination and page numbers?

Any suggestions for hooking into SlickGrid events like onFilterChanged to achieve this behavior cleanly?

[ghiscoding]

never heard of "sliding window pagination". The reason that I added useLocalFiltering and useLocalSorting was to use the Backend Service only to load the data, everything else would simply use local Filtering/Sorting and Pagination. The only thing that I can think of would be to use these flags and whenever you get new data, then push it using the DataView with Bulk Update. That could work but this mean that you will have to subscribe to all necessary events (e.g. onBeforeSearchChange, onFilterCleared, onSortChanged, onSortCleared, ... and your own events when using your own custom pagination) then do your own stuff. In other words, this would probably require a lot of code to get it all working, good luck.

[Shreyanshsahu14]

If we’re implementing custom sliding-window pagination, how do we stop SlickGrid from resetting the page number (e.g., when filters are applied)? Is return false in onFilterChanged the correct way, or is there a cleaner option?
Also tried the bulkupdate in dataview, is this correctly applied,if not please correct me. Bcoz after implementing this , page was again resetting to 1 but contents were showing of page on which filters were applied.
Here's my React Typescript implementation :

currentPageRef=useRef();

gridOptions={
 datasetIdPropertyName: 'userId',
}       
useEffect(() => {
      const grid = reactGridRef.current;
      if (!grid) return;

    const sub1 = grid.eventPubSubService?.subscribe('onPaginationChanged', (data) => {
  currentPageRef.current = data?.args?.newPage ?? 1;

  const skip = (currentPageRef.current - 1) * pageSize;
  const visibleItems = blockCacheRef.current.slice(skip, skip + pageSize);

  const gridInstance = reactGridRef.current?.slickGrid;
  if (gridInstance) {
    const dataView = gridInstance.getData();
    dataView.beginUpdate();
    dataView.setItems(visibleItems, 'userId');
    dataView.endUpdate();
  }
});

      const sub2 = grid.eventPubSubService?.subscribe('onFilterChanged', (data) => {
       const page=currentPageRef.current;
       const skip=(page-1)*pageSize;
        const source = blockCacheRef.current; // or filteredCacheRef after applying filter
  const visibleItems = source.slice(skip, skip + pageSize);
  setDataset(visibleItems);
        // return false to prevent Slickgrid from resetting to page 1
        return false;
      });
      return () => {
        sub1?.unsubscribe();
        sub2?.unsubscribe();
      };
    }, []);

[ghiscoding]

Sorry but I already said that I won't support this and I have no intention on spending time on this either, your use case is not the typical use case... nonetheless, you should look at Example 42 with a Custom Pager, but that probably won't be enough and you might need to directly extends the built-in Pagination with TypeScript (not with React but with just native TypeScript) and modify it to your needs. Everything in the project is extendable with TypeScript to make it easier and doable to modify to your needs

slickgrid-universal/packages/pagination-component/src/slick-pagination.component.ts

Lines 15 to 20 in 48b37a2

	export class SlickPaginationComponent implements BasePaginationComponent {
	protected _bindingHelper: BindingHelper;
	protected _bindingEventService: BindingEventService;
	protected _paginationElement!: HTMLDivElement;
	protected _enableTranslate = false;
	protected _grid!: SlickGrid;