Chef’s Kitchen: Free Next JS Responsive Restaurant Website Template
Chef'sKitchen: a free, sleek, one-page restaurant website template. Built with NextJS and Typescript, it uses React JS components for organized conten…
Pagination Js is a powerful, highly customizable, and styleable jQuery-based pagination system for long content that improves webpage readability.
- <code>
- # NPM
- $ npm install paginationjs --save
-
- # Bower
- $ bower install paginationjs --save
- </code>
Load jQuery library and the jQuery
- <code>
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/pagination.js"></script>
- </code>
Call the plugin function and set the options.
- <code>
- $('#demo').pagination({
- dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
- callback: function(data, pagination){
- // template method of yourself
- var html = template(data);
- dataContainer.html(html);
- }
- });
- </code>
- <code>
- $('#demo').pagination({
-
- // Data source
- // Array | String | Function | Object
- dataSource: '',
-
- // String | Function
- locator: 'data',
-
- // Total entries, must be specified when the pagination is asynchronous
- totalNumber: 1,
-
- // Default page
- pageNumber: 1,
-
- // entries of per page
- pageSize: 10,
-
- // Page range (pages on both sides of the current page)
- pageRange: 2,
-
- // Whether to display the 'Previous' button
- showPrevious: true,
-
- // Whether to display the 'Next' button
- showNext: true,
-
- // Whether to display the page buttons
- showPageNumbers: true,
-
- showNavigator: false,
-
- // Whether to display the 'Go' input
- showGoInput: false,
-
- // Whether to display the 'Go' button
- showGoButton: false,
-
- // Page link
- pageLink: '',
-
- // 'Previous' text
- prevText: '«',
-
- // 'Next' text
- nextText: '»',
-
- // Ellipsis text
- ellipsisText: '...',
-
- // 'Go' button text
- goButtonText: 'Go',
-
- // Additional className for Pagination element
- //className: '',
-
- classPrefix: 'paginationjs',
-
- // Default active class
- activeClassName: 'active',
-
- // Default disable class
- disableClassName: 'disabled',
-
- //ulClassName: '',
-
- // Whether to insert inline style
- inlineStyle: true,
-
- formatNavigator: '<%= currentPage %> / <%= totalPage %>',
-
- formatGoInput: '<%= input %>',
-
- formatGoButton: '<%= button %>',
-
- // Pagination element's position in the container
- position: 'bottom',
-
- // Auto hide previous button when current page is the first page
- autoHidePrevious: false,
-
- // Auto hide next button when current page is the last page
- autoHideNext: false,
-
- //header: '',
-
- //footer: '',
-
- // Aliases for custom pagination parameters
- //alias: {},
-
- // Whether to trigger pagination at initialization
- triggerPagingOnInit: true,
-
- // Whether to hide pagination when less than one page
- hideWhenLessThanOnePage: false,
-
- showFirstOnEllipsisShow: true,
-
- showLastOnEllipsisShow: true,
-
- // Paging callback
- callback: function(){}
-
- })
- </code>
- <code>
- // Go to the previous page.
- container.pagination('previous');
-
- // Go to the next page.
- container.pagination('next');
-
- // Go to the custom page.
- container.pagination('go', 8)
-
- // Disable the plugin
- container.pagination('disable');
-
- // Enable the plugin
- container.pagination('enable');
-
- // Hide the pagination
- container.pagination('hide');
-
- // Destroy the plugin
- container.pagination('destroy');
- </code>