tahash/svelte-paginate

A Svelte plugin for paginating your data in no time

svelte-paginate's Issues

Go to top after change currentPage

Hello.

Is there a way to go to the top of the page after navigating?
I need something like this:

function scrollTo(elId) {
  const el = document.getElementById(elId);
  el.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
};

Uncaught TypeError: items is undefined

In the example code, the list of objects is in "items", which is used in paginatedItems. To fit this into an existing app that uses "articles", I have the following (I have left out a lot of the code)

let hero, articles;
...
async function fetchData() {
....
const [first, ...rest] = formattedArticles;
hero = first;
articles = rest;
}
onMount(fetchData);
$: paginatedItems = paginate({ articles, pageSize, currentPage })
.....
{#if articles}

{#each paginatedItems as article, index}
<Article {article} bordered={index !== articles.length - 1} />
{/each}

{/if}

When I run this in the browser, I get an error of
Uncaught TypeError: items is undefined
paginate paginate.js:2

Is this expecting the data to be in "items". I have essentially replaced "items" in the example with "articles"

Regards,

pass state to slot

If we use "next" or "prev" slot to change contents to <a href=...> instead of event, then there is no option check is element disabled or not.
It could be fixed by adding disabled prop to slots

Question no a bug

I am trying to connect the next, prev and page to send a request to the server, the server is specting a page number (req.params.page). How can I do this?

Project maintenance

Hi @TahaSh.

I think we have some pending pull request untouched for years.
My suggestions is that allowing one of us to have access to merge this PR.

Thanks for svelte-paginate.

Bug with using it in the newest version(s) of SvelteKit

Probably because of this change: sveltejs/kit#5332 the following error will occur:

/node_modules/svelte-paginate/src/index.js:1
export { default as paginate } from './paginate.js'
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)

Found a related issue: vitejs/vite#7130

Reinstalling did work on the first try, but after that still the same error.

Updating the package to ES Modules obviously doesn't fix the problem and will produce a Unknown file extension ".svelte" type error.

const { paginate, LightPaginationNav } = 'svelte-paginate'; wont' fix it neither.

svelte-paginate doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Is items a keyword

When trying to do $: paginatedItems = paginate({ _items, pageSize, currentPage }). When saying _items, it wont show anything. However when doing items instead of _items, it works. So is it something I am doing wrong? Or does it need "items"?

Customizing the options of the LightPaginationNav navigation component

Hi there,

Is there a way to customise LightPaginationNav footer to display currentPage/TotalItems type pagination?
I tried

<slot="number">
currentPage/TotalItems

but it displays it number of times the total items. for example if i have 2 items then it will display 1/2 2/2 on page.

Active page number has a small bug

When I am clicking on about 5, it goes to page 6 and that becomes active.

Also looked at the comments on the third image

totalPages become undefined

I am using Svelte-Paginate to paginate at three places. However, at one particular invocation which is similar to other two

const totalPages = Math.ceil(totalItems / pageSize) line gives a NaN because totalItems become undefined for no good reason. I am using it with SSR using Sapper. Works fie at two other places.

Warning during svelte kit build

If you will try to use component in svelte kit you will get message:

svelte-paginate is incorrectly packaged. Please contact the package author to fix.

Probably it should be migrated to new packaging system presented in kit - https://kit.svelte.dev/docs#packaging

Hint: Could not find a declaration file for module './DarkPaginationNav.svelte'.

How to fix Hint: Could not find a declaration file for module './DarkPaginationNav.svelte'.?

> [email protected] check /home/username/softwares/learn/pokedex-svelte
> svelte-check --tsconfig ./tsconfig.json --workspace src


====================================
Loading svelte-check in workspace: /home/username/softwares/learn/pokedex-svelte/src
Getting Svelte diagnostics...

/home/username/softwares/learn/pokedex-svelte/src/../node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/main.ts:2:42
Hint: Could not find a declaration file for module './PaginationNav.svelte'. '/home/username/softwares/learn/pokedex-svelte/node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/PaginationNav.svelte' implicitly has an 'any' type.
export { default as paginate } from './paginate'
export { default as PaginationNav } from './PaginationNav.svelte'
export { default as LightPaginationNav } from './LightPaginationNav.svelte'


/home/username/softwares/learn/pokedex-svelte/src/../node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/main.ts:3:47
Hint: Could not find a declaration file for module './LightPaginationNav.svelte'. '/home/username/softwares/learn/pokedex-svelte/node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/LightPaginationNav.svelte' implicitly has an 'any' type.
export { default as PaginationNav } from './PaginationNav.svelte'
export { default as LightPaginationNav } from './LightPaginationNav.svelte'
export { default as DarkPaginationNav } from './DarkPaginationNav.svelte'


/home/username/softwares/learn/pokedex-svelte/src/../node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/main.ts:4:46
Hint: Could not find a declaration file for module './DarkPaginationNav.svelte'. '/home/username/softwares/learn/pokedex-svelte/node_modules/.pnpm/file+..+..+forks+svelte-paginate/node_modules/svelte-paginate/src/DarkPaginationNav.svelte' implicitly has an 'any' type.
export { default as LightPaginationNav } from './LightPaginationNav.svelte'
export { default as DarkPaginationNav } from './DarkPaginationNav.svelte'

@bas-baskara, Do you have this issue in your branch when running the svelte-check?
I have my own fork https://github.com/azzamsa/svelte-paginate/commits/mine which also contains your changes. But this error pops up.

If we could solve this issue we also able to patch https://github.com/TahaSh/vue-paginate.

on:click

how can implement on:click in the paginated anchors?

Style LightPaginationNav

Hello! Is there any way to add own styles to LightPaginationNav? I don't want to edit the package.

Thanks!

export 'paginate' (imported as 'paginate') was not found in 'svelte-paginate'

Hey there,

today I was trying to use svelte-paginate in my Golang-Buffalo-Project, which runs a webpacke-configuration of svelte using svelte-loader as described in the official documentation.

I run into a loading/resolving error that I cannot figure out. I do NOT use TypeScript:

WARNING in ./assets/js/components/SearchApp.svelte 498:39-47
export 'paginate' (imported as 'paginate') was not found in 'svelte-paginate' (possible exports: DarkPaginationNav, LightPaginationNav, PaginationNav)
 @ ./assets/js/search.js 1:0-54 2:16-25

I see more consequent(?) errors:

ERROR in ./node_modules/svelte-paginate/generateNavigationOptions.js 1:0-37
Module not found: Error: Can't resolve './types' in '/Users/tim/Workspace/wescale/wapiti/node_modules/svelte-paginate'
Did you mean 'types.js'?
BREAKING CHANGE: The request './types' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

and the same for paginate after that:

ERROR in ./node_modules/svelte-paginate/index.js 1:0-38
Module not found: Error: Can't resolve './paginate' in '/Users/tim/Workspace/wescale/wapiti/node_modules/svelte-paginate'
Did you mean 'paginate.js'?
BREAKING CHANGE: The request './paginate' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I use this to import svelte-paginate:

  import { paginate, LightPaginationNav } from 'svelte-paginate'
  ...

  let results = [];
  let currentPage = 1;
  let pageSize = 50;
  $: paginatedItems = paginate({ items: results, pageSize, currentPage })

Any ideas?

Update controls for accessibilty

svelte-paginate could be more accessible by making a few small changes.

1. Update the <span class="option"> to be a <button> (remove default styling)
2. Add aria-selected=true to the button that matches the active page
3. Add an aria-label to the buttons e.g. Go to page 1
4. Add a role and label to the container: <nav role="navigation" aria-label="Items Navigation">

3 & 4 could be passed in as props.

@TahaSh I can create a PR if you agree with these proposed changes?

For context, I use svelte-paginate on my site: http://aoelibrary.com/. I'm doing some work to make it accessible at the moment.

Repo: https://github.com/collinstommy/aoe-library

Thanks for making this package. It saved me a lot of work!

Question

I am trying to add active class to the pagination on hashchange event. I can't figure this out.
I made some modifications and here is my repo and the pagination src is under src/components/UI/paginate
Do you know how can I accomplish this?