Server Side Pagination/Filter/Sort - Full Example

[kuatroka]

Reposting from selte-headless-table's discussions because I think there is a bigger community here and probably more chances for an answer.

Hi, I know there is a discussion thread with supposedly answered question on Server Side API here

For someone new to Sveltekit and web dev that answer is quite tough to follow. I would appreciate if someone could create or share a link to a guide/documentation/ code example where the pagination, multi column filter/search and sorting is properly explained with code in:

Complete DataTable.svelte component
+page.server.ts fetching data from a public API/ loading data with SQL in a load function and referencing the DataTable component's data necessary to make the Server Side pagination work.
Use of this component in a +page.svelte where the real export let data is used to render the actual DataTable.
Thanks a lot!

[babakfp]

Hey

This may help.

• https://youtu.be/G-tafjJzfQo?si=1TCeP6Fqx4Kc_fe2
• https://youtu.be/pjV3rCBBT_Q?si=ZG2z40QXh8WKIfFV
• https://youtu.be/VgCU0cVWgJE?si=4rCtNNuOelPUuQxz
• https://youtube.com/@JoyofCodeDev?si=QI9QRMEhrwb0ktH5

You can search for things like "SvelteKit SQL", and "SvelteKit ..." on YouTube and Google.

[kuatroka]

Thanks @babakfp . I had already watched @huntabyte's video on pagination and surprisingly made it work server side for the table. I don't even really know why it works, but it does. Now struggling with the Search and Sort.
I'll share the code when it's done.

The video from hartenfellerdev is about tanstack table so I skipped it. Maybe I need to go back to it and learn the concept though

[babakfp]

Instead of working with a database or anything like that, you can first play around with some static data. So, this way there will be fewer things to learn and worry about.

Think about a simple search field. You take a single word as an input and look into an array of string to find which one of the item in the array contain that word, if any items don't contain the word, filter them out, and return the rest.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

For sorting, JavaScript has this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort method you can use to sort things, you simply compare to items in an array and return which one has more propriety.

If you can't get this stuff working in Svelte... I just simplifying it more, so instead of using Svelte, just use plain JavaScript and put aside the templating things.

You can look for things like this on YouTube too and you will find people explaining them in simple terms.

Sometimes when a tutorial or a guide doesn't exist for Svelte, I look for how the same thing can be done in other frameworks, and that gives me a good idea of how I can implement the same thing myself.

You can also use ChatGPT, which I find quite useful for writing RegEx 🤣

Good luck

[kuatroka]

I sort of made it work. Some issues like Searchbox flickering are still there, but the Search/Pagination seem to work.

P.S. I've been using Cursor and Codeium instead of ChatGPT. Unless it's GPT-4, it hallucinates the correct results pretty heavily.