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

4 comments:

for IT theJanuary 24, 2018 at 10:01 PM
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai
for IT theJanuary 26, 2018 at 11:33 PM
great
rthwerJanuary 7, 2020 at 1:46 AM
This article was written by a real thinking writer without a doubt. I agree many of the with the solid points made by the writer. I’ll be back day in and day for further new updates. buttons bootstrap

How to create pagination in Bootstrap?

4 comments:

Popular Posts

Tags

Contact Form