Pagination and RestDataProvider

kane81

Hi,

I am just trying to get a handle on RestDataProvider and wondering if it is compatible with Pagination/Pager component?

If so are you able to provide an example?

Thank you

tasha

Hello

This is the example of handling RestDataProvider with Pager: https://stackblitz.com/edit/sveltejs-kit-template-default-ewcw5rnq?file=src%2Froutes%2FMyGrid.svelte

Here we apply RestDatProvider:

const provider = new RestDataProvider(
"https://master--svar-grid-go--dev.webix.io/films",
(o) => o
);

After the data is available we can change as we need:

  provider.getData().then((v) => {
    data = v.slice(0, pageSize);
    allData = v;
  });

You can catch the change of the active page using change event.

kane81

Hi Tasha,

With the RestDataProvider, it is a large dataset, so I do not want to be passing the whole contents to the client.

So access to "total={allData.length}" is not available.

the pager needs to request from the RestDataProvider a offset and limit, sort order, ascending or descending and possibly criteria.

here is a GET I was thinking of, but the default provider GET only allows {data} and not {data, total}

export async function GET({ url }) {
	const offset = Number(url.searchParams.get('offset') || 0);
	const limit = Number(url.searchParams.get('limit') || 20);
	const q = url.searchParams.get('q')?.trim();
	const sortBy = url.searchParams.get('sortBy') ?? 'createdAt';
	const sortOrder = (url.searchParams.get('sortOrder') ?? 'DESC').toUpperCase() as 'ASC' | 'DESC';

	const persistance = await Persistance.getInstance();
		const where = q
			? [
					{ name: ILike(`%${q}%`) },
					{ breed: ILike(`%${q}%`) },
					{ animalId: ILike(`%${q}%`) }
			  ]
			: undefined;

		const [animals, total] = await persistance.animal.findAndCount({
			where,
			order: { [sortBy]: sortOrder },
			skip: offset,
			take: limit
		});

		return json({ data: animals, total });
}

as for setPage() I was thinking


function setPage(ev) {
	const { from, to } = ev;

	// If we already have all data, just page locally
	if (data.length === totalRows) {
		pageData = data.slice(from, to);
	} else {
		// Otherwise, update URL params to trigger server reload
		const params = new URLSearchParams(get(page).url.searchParams);
		params.set('offset', from.toString());
		params.set('limit', (to - from).toString());

		// do call to api
	}
}

I dont want to re-invent the wheel, so checking if RestDataProvider and Pager can do something like this or advice on how I should be implement this.

Thank you