Paginate Large Sets Of Data Using Bootstrap 4 Pagination - Buzina Pagination

Buzina Pagination is a small jQuery plugin that uses Bootstrap 4 pagination component to paginate large sets of data with navigation links and next/previous buttons.

You are able to specify the number of records to be shown per page.

How to use it:

1. Include Bootstrap 4 and jQuery library on the webpage.

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

2. Include the jQuery Buzina Pagination plugin's JavaScript and Stylehsheet:

<!-- CSS -->
<link href="buzina-pagination.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="buzina-pagination.min.js"></script>

3. Wrap your data into DIV elements as follows:

<div id="example">
  <div>Record 1</div>
  <div>Record 2</div>
  <div>Record 3</div>
  <div>Record 4</div>
  <div>Record 5</div>
  ...
  <div>Record x</div>
</div>

4. Call the function on the top container to create a pagination under the data list:

$(function(){

  $('#example').buzinaPagination();

});

5. Specify how many records to show per page. Default: 1.

$(function(){

  $('#example').buzinaPagination({
    itemsOnPage: 5
  });

});

6. Specify whether to show the prev/next buttons.

$(function(){

  $('#example').buzinaPagination({
    prevnext: true,
    prevText: "Previous",  
    nextText: "Next"
  });

});

---

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