How to create pagination in Bootstrap?

This jQuery plugin "twbsPagination()" simplifies the usage of Bootstrap Pagintion.

Plugin requires jQuery (required - 1.7.0 or higher).

You can use Bootstrap CSS styles and markup (or use your own).

More details available here

Add this lines in to your HTML code

<div class="well PageContent"></div>
<ul class="PaginationLinks pagination-sm"></ul>

Add this script in to your JavaScript section

$('.PaginationLinks').twbsPagination(
{
totalPages: 20,
visiblePages: 7,
onPageClick: function (event, PageNo) {
$('.PageContent').text('Page ' + PageNo);
}
});

Final code and demo is here

<!DOCTYPE html><html><head><title>Tryit Editor - tools.bitcompiler.com</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$(document).ready(function () {     $('.PaginationLinks').twbsPagination(     {         totalPages: 20,         visiblePages: 7,         onPageClick: function (event, PageNo)         {             $('.PageContent').text('Page ' + PageNo);         }     }); }); </script>  </head><body>    <div class="container">
        <h3>
How to create pagination in Bootstrap?</h3>
<br/>        <div class="row">
            <div class="col-md-12">
                <div class="well PageContent">
</div>
<ul class="PaginationLinks pagination-sm"></ul>
</div>
</div>
</div>
</body></html>

Demo

How to create pagination in Bootstrap?

No comments:

Post a Comment

Popular Posts

Tags

Contact Form