cornflourblue / jw-angular-pagination

A simple lightweight pagination component for Angular 2+ available on npm

About me

I'm a web developer and blogger from Sydney, you can find my blog at https://jasonwatmore.com/.

Other than coding, I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans, you can follow our adventure on YouTube and Instagram.

jw-angular-pagination's Issues

Client-side Pagination

I've looked at this library for pagination a few times and each time I've had to dismiss it as everything I've seen including your own site suggests that it only supports client-side pagination. Please please correct me if I'm wrong about this.

I am working currently with a data set of 12,000 items, I'm certainly not going to get them all back from the DB into the browser to then paginate them.

I think we should support angular lvy

Changing original array doesn't update paginator length. data is not loaded onload of page

I have integrated this paginator to our project. What I observed is like whenever items is changing paginator has to change accordingly, but it doesn't seems to happen. Lets say initially i hav table with 100 records, 10 records per page, then i will be getting first,prev,1 to 10 next and last in paginator. Now when i am filtering on table, now items array is getting reduced to 25 records now i am expecting paginator to show first prev 1 2 3 next last first and second page having 10 records each, and 3rd page showing 5 records. BUt paginator is not getting changed instead its showing filtered records in all 10 pages. Another observation is like when we are getting data from service, onload of page table is empty and paginator is not visible, when we navigate to different tab and come back then data is getting populated. Let me if i am doing anything wrong.

How can we make the page numbers focusable?

Due to accessibility requirements, I was wondering how page numbers can be selected through the use of the keyboard.
Thanks for help.

Eg: Given
First - 1 - 2 -3 -4 ..... Latest

I would like to go to page 3 just by clicking a number within the keyboard or any other combination.

AOT compiling error

When I try to compile with --aot flag I get the following error.

ERROR in Error: Unexpected value 'JwPaginationComponent in /Users/codev/workspace/cumulus/node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts' declared by the module 'AppModule in /Users/codev/workspace/cumulus/src/app/app.module.ts'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
at /Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:15481:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:15463:54)
at addNgModule (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:24268:58)
at /Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:24279:14
at Array.forEach (native)
at _createNgModules (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:24278:26)
at analyzeNgModules (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:24153:14)
at analyzeAndValidateNgModules (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:24163:35)
at AotCompiler.analyzeModulesAsync (/Users/codev/workspace/cumulus/node_modules/@angular/compiler/bundles/compiler.umd.js:23797:46)
at CodeGenerator.codegen (/Users/codev/workspace/cumulus/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (/Users/codev/workspace/cumulus/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
at _donePromise.Promise.resolve.then (/Users/codev/workspace/cumulus/node_modules/@ngtools/webpack/src/plugin.js:428:58)

Label translation

All the button's label are in english only.
Could you provide a way to define label for each one? It will enable me to support different languages not only english.

Unexpected value JwPaginationComponent ng build --prod

Hi, when trying to build with ng build --prod . This library throw an error

Unexpected value 'JwPaginationComponent in /Users/firmcode1/Documents/projects/fiction-project/production/node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts' declared by the module 'AppModule in /Users/firmcode1/Documents/projects/fiction-project/production//src/app/app.module.ts'. Please add a @Pipe/@Directive/@component annotation.

file ...node_modules/jw-paginate/src/jw-paginate.ts' not found.

Hi,
I'm trying to apply this pagination module to my project and encountered a problem.
After installing jw-paginate package and setting "allowSyntheticDefaultImports" to true, all seems fine but jw-paginate.ts file is not found. The module seems to have no this file indeed. Can you please help how I can fix this?

Thanks,
Brian Liu

Dynamically change the pageSize with a dropdown

Add aria tags to pagination elements to make 508 compliant

You need to add aria tags to BS pagination design elements to be 508 compliant.
https://getbootstrap.com/docs/3.3/components/#pagination

BS4 Pagination Styles

Hi There

Are you planning to add the BS4 pagination styles? For now I have added them myself (quite hacky) however will loose them when deploying. I have tested and you can add the classes without effecting BS3 support.

Look forward to hearing from you.

Tom

AOT compiling error

When I try to compile with --aot flag I get the following error.

ERROR in node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(9,10): Property 'setPage' is private and only accessible within class 'JwPaginationComponent'.
node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(3,10): Property 'setPage' is private and only accessible within class 'JwPaginationComponent'.
node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(6,10): Property 'setPage' is private and only accessible within class 'JwPaginationComponent'.
node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(12,10): Property 'setPage' is private and only accessible within class 'JwPaginationComponent'.
node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(15,10): Property 'setPage' is private and only accessible within class 'JwPaginationComponent'.