
An easy, flexible, searchable, and highly customizable content paginator with jQuery (or Vanilla JavaScript) that provides the convenient, client-side pagination functionality for long block elements.
Easy to customize using your own CSS. Compatible with the latest Bootstrap framework. Also supports AJAX content loading.
1. Download and put the JavaScript file Flexible.Pagination.js
on the web page.
<script src="Flexible.Pagination.js"></script>
2. Insert block elements into the webpage.
<div id="content"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> <div class="item"> Item 3 </div> ... </div>
3. Create a container to hold the pagination links.
<div id="pagingControls"></div>
4. Create a search field to filter the block elements (OPTIONAL).
<input class="searchBox" placeholder="Search Something. E.g. jQueryScript">
5. Call the plugin to generate pagination links.
// jQuery var flexiblePagination = $('#content').flexiblePagination({ // options here }); // Vanilla JavaScript var flexiblePagination = new Flexible.Pagination(); flexiblePagination.pagingContainer = '#content';
6. All possible options to customize the paginator.
var flexiblePagination = $('#content').flexiblePagination({ // Selectors pagingControlsContainer: "#pagingControls", pagingContainer: "#content", itemSelector: ".item:visible", itemsPerPageSelector: ".itemPerPageDropDown", //Paragraphs Per Page searchBoxSelector: '.searchBox', showingInfoSelector: '.showingInfo', // How many items to display per page itemsPerPage: 1, // Current page currentPage: 1, // Search phrase searchPhrase: '', /** How many Page Number should be visible while navigating. Minimum allowed is 3 (previous, current & next) displayedPages: 10, // Show/hide control buttons showGotoFirst: true, showGotoLast: true, showPrevious: true, showNext: true, // All text can accept an icon using a <span> OR <i> tag. btnFirstText: "<<", btnLastText: ">>", btnNextText: ">", btnPreviousText: "<", // CSS properties css: { paginationLayout: "<style> " + pagingControlsContainer+" ul{display:inline, padding-left: 0.2em} " + pagingControlsContainer+" li{display:inline, padding-left: 0.2em}" + "</style>", btnNumberingClass: "btn btn-sm btn-primary", btnActiveClass: "btn btn-sm btn-default", btnFirstClass: btnNumberingClass, btnLastClass: btnNumberingClass, btnNextClass: btnNumberingClass, btnPreviousClass: btnNumberingClass, }, // data source dataSource: {}, // ajax data source ajax: { params: {}, url: '', } })
This awesome jQuery plugin is developed by debascoguy. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 18.01.2019
- Source