jQuery Pagination Plugin with Asynchronous Data Load

Leon Shi March 09, 2023

ADN
jquery-pagination-plugin-with-asynchronous-data-load

Live Preview Download

Pagination Js is a powerful, highly customizable, and styleable jQuery-based pagination system for long content that improves webpage readability.

Pagination Js Features

  • Text and numbers for pagination are customizable
  • Supports both local and remote data via Ajax requests.
  • Numerous options/methods/events to meet your specific requirements.
  • Customizable CSS styles

Pagination Js Implementation

Installation
  1. <code>
  2. # NPM
  3. $ npm install paginationjs --save
  4. # Bower
  5. $ bower install paginationjs --save
  6. </code>

Load jQuery library and the jQuery

  1. <code>
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="/path/to/pagination.js"></script>
  4. </code>

Call the plugin function and set the options.

  1. <code>
  2. $('#demo').pagination({
  3. dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
  4. callback: function(data, pagination){
  5. // template method of yourself
  6. var html = template(data);
  7. dataContainer.html(html);
  8. }
  9. });
  10. </code>
Configuration Options
  1. <code>
  2. $('#demo').pagination({
  3. // Data source
  4. // Array | String | Function | Object
  5. dataSource: '',
  6. // String | Function
  7. locator: 'data',
  8. // Total entries, must be specified when the pagination is asynchronous
  9. totalNumber: 1,
  10. // Default page
  11. pageNumber: 1,
  12. // entries of per page
  13. pageSize: 10,
  14. // Page range (pages on both sides of the current page)
  15. pageRange: 2,
  16. // Whether to display the 'Previous' button
  17. showPrevious: true,
  18. // Whether to display the 'Next' button
  19. showNext: true,
  20. // Whether to display the page buttons
  21. showPageNumbers: true,
  22. showNavigator: false,
  23. // Whether to display the 'Go' input
  24. showGoInput: false,
  25. // Whether to display the 'Go' button
  26. showGoButton: false,
  27. // Page link
  28. pageLink: '',
  29. // 'Previous' text
  30. prevText: '«',
  31. // 'Next' text
  32. nextText: '»',
  33. // Ellipsis text
  34. ellipsisText: '...',
  35. // 'Go' button text
  36. goButtonText: 'Go',
  37. // Additional className for Pagination element
  38. //className: '',
  39. classPrefix: 'paginationjs',
  40. // Default active class
  41. activeClassName: 'active',
  42. // Default disable class
  43. disableClassName: 'disabled',
  44. //ulClassName: '',
  45. // Whether to insert inline style
  46. inlineStyle: true,
  47. formatNavigator: '<%= currentPage %> / <%= totalPage %>',
  48. formatGoInput: '<%= input %>',
  49. formatGoButton: '<%= button %>',
  50. // Pagination element's position in the container
  51. position: 'bottom',
  52. // Auto hide previous button when current page is the first page
  53. autoHidePrevious: false,
  54. // Auto hide next button when current page is the last page
  55. autoHideNext: false,
  56. //header: '',
  57. //footer: '',
  58. // Aliases for custom pagination parameters
  59. //alias: {},
  60. // Whether to trigger pagination at initialization
  61. triggerPagingOnInit: true,
  62. // Whether to hide pagination when less than one page
  63. hideWhenLessThanOnePage: false,
  64. showFirstOnEllipsisShow: true,
  65. showLastOnEllipsisShow: true,
  66. // Paging callback
  67. callback: function(){}
  68. })
  69. </code>
Pagination Events
  1. <code>
  2. // Go to the previous page.
  3. container.pagination('previous');
  4. // Go to the next page.
  5. container.pagination('next');
  6. // Go to the custom page.
  7. container.pagination('go', 8)
  8. // Disable the plugin
  9. container.pagination('disable');
  10. // Enable the plugin
  11. container.pagination('enable');
  12. // Hide the pagination
  13. container.pagination('hide');
  14. // Destroy the plugin
  15. container.pagination('destroy');
  16. </code>

Next: How to start a Small online business

also view other related posts,