Import pagination from directory

                            
                                import Pagination from 'poltoratchi-pagination-js-plugin';

Initial connection

Required parameter stack for connection

                            
                                const paginationWrapper1 = document.querySelector( '#pagination-1' );
                                // you can use JQUERY const paginationWrapper1 = $('#pagination01')[0]

                                const pagination1 = new Pagination( paginationWrapper1, {
                                    pageSize: 10,
                                    elements: 101
                                } );

More center pages to show

The number of pages for the central display must be an odd number (even if you enter an even number, it is incremented by 1)

                            
                                const paginationWrapper2 = document.querySelector( '#pagination-2' );

                                const pagination2 = new Pagination( paginationWrapper2, {
                                    pageSize: 10,
                                    elements: 181,
                                    pagesShow: 11
                                } );

Custom handler

You can make a custom handler function for pagination

Current page: 1

                            
                                const paginationWrapper3 = document.querySelector( '#pagination-3' );
                                const currentPageCounter = document.querySelector('#current-page-counter');

                                const pagination3 = new Pagination( paginationWrapper3, {
                                    pageSize: 10,
                                    elements: 181,
                                    pageHandle: function (pageNumber, lastPageNumber, event) {
                                        this.changePage(pageNumber);
                                        currentPageCounter.textContent = pageNumber;
                                    }
                                } );

Destroy / init

You can destroy pagination and initialize it again

                            
                                const paginationWrapper4 = document.querySelector( '#pagination-3' );
                                const destroyBtn = document.querySelector( '#destroy' );
                                const initBtn = document.querySelector( '#init' );

                                const pagination4 = new Pagination( paginationWrapper4, {
                                    pageSize: 10,
                                    elements: 181,
                                } );

                                initBtn.addEventListener('click', () => pagination4.init());
                                destroyBtn.addEventListener('click', () => pagination4.destroy());

Rebuild

You can make rebuild pagination with new options

                            
                                const paginationWrapper5 = document.querySelector( '#pagination-3' );
                                const inputsWrapper = document.querySelector( '.inputs-wrapper' );
                                const rebuildBtn = document.querySelector( '#rebuild' );

                                const pagination5 = new Pagination( paginationWrapper5, {
                                    pageSize: 10,
                                    elements: 181,
                                    pagesShow: 5
                                } );

                                rebuildBtn.addEventListener( 'click', () => {
                                    const newOptions = {};
                                    inputsWrapper.querySelectorAll( 'input' ).forEach( input => {
                                        if ( input.value.length > 0 && !isNaN( parseInt( input.value ) ) ) {
                                            newOptions[input.name] = input.value
                                        }
                                    } );
                                    pagination5.rebuild(newOptions)
                                } );