Searchable Content Paginator For jQuery - FlexiblePaginationJS

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.