Bootstrap Compatible Pagination For Tabs - jQuery tabulation.js

tabulation.js is a very small jQuery paginator plugin to create pagination controls to switch between tabbed content within your document.

Compatible and styled with the latest Bootstrap 4 or Bootstrap 3 framework.

1. Load the Bootstrap's stylesheet in the header of the webpage.

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
      crossorigin="anonymous"
>

2. Add the data-tabulation-tab attribute to tabs.

<div data-tabulation-tab>Tab #1</div>
<div data-tabulation-tab>Tab #2</div>
<div data-tabulation-tab>Tab #3</div>
<div data-tabulation-tab>Tab #4</div>
<div data-tabulation-tab>Tab #5</div>
...

3. Create the pagination links as follows:

<a href="#" class="btn btn-info" data-tabulation-nav="prev">prev</a>
<a href="#" class="btn btn-light" data-tabulation-nav="1">1</a>
<a href="#" class="btn btn-light" data-tabulation-nav="2">2</a>
<a href="#" class="btn btn-light" data-tabulation-nav="3">3</a>
<a href="#" class="btn btn-light" data-tabulation-nav="4">4</a>
<a href="#" class="btn btn-light" data-tabulation-nav="5">5</a>
...
<a href="#" class="btn btn-info" data-tabulation-nav="next">next</a>

4. To initialize the paginator automatically, just add the data-tabulation to the parent container. The full HTML should be like so:

<div class="card" data-tabulation>
  <div class="card-header">
    Init with data attribute (standard)
  </div>
  <div class="card-body">
    <div data-tabulation-tab>Tab #1</div>
    <div data-tabulation-tab>Tab #2</div>
    <div data-tabulation-tab>Tab #3</div>
    <div data-tabulation-tab>Tab #4</div>
    <div data-tabulation-tab>Tab #5</div>
  </div>
  <div class="card-footer">
    <a href="#" class="btn btn-info" data-tabulation-nav="prev">prev</a>
    <a href="#" class="btn btn-light" data-tabulation-nav="1">1</a>
    <a href="#" class="btn btn-light" data-tabulation-nav="2">2</a>
    <a href="#" class="btn btn-light" data-tabulation-nav="3">3</a>
    <a href="#" class="btn btn-light" data-tabulation-nav="4">4</a>
    <a href="#" class="btn btn-light" data-tabulation-nav="5">5</a>
    <a href="#" class="btn btn-info" data-tabulation-nav="next">next</a>
  </div>
</div>

5. You're also allowed to initialize the paginatin by calling the function (with optional settings) on the top container.

$('.content').tabulation({
  // active classes
  navigation: {
    active: {
      class: 'active',
    }
  },
  // active classes
  tabulation: {
    active: {
      class: 'active',
    }
  }
  
});

This awesome jQuery plugin is developed by ruastronaut. For more Advanced Usages, please check the demo page or visit the official website.