Easy Client Side Pagination Using jQuery Dynapagin Plugin

File Size: 7.29KB
Views Total: 14861
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Client Side Pagination Using jQuery Dynapagin Plugin

Dynapagin is a jQuery plugin that provides a simple method to create a flexible Client Side Pagination for your long content without any server-side code. To work with Twitter's Bootstrap 3, make sure to include Boostrap framework in your page, the dynapagin's selector will inherit the .pagination and .pager styles, including those of their child elements.

You might also like:

Basic Usage:

1. Load the jQuery javascript library and jQuery Dynapagin plugin at the bottom of your web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/dynapagin.js"></script>

2. Create a container for the content that will be paginated.

<div id="content"></div>

3. Create a container for the paginagtion.

<div id="dynapagin"></div>

4. Style the pagination using CSS or Bootstrap framework.

.dynapagin-selector {
border-radius: 4px;
font-family: sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
}
.dynapagin-selector li {
display: inline-block;
margin: 0;
padding: 0;
}
.dynapagin-selector li a {
background-color: #ffffff;
color: #3379b5;
border-top: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
padding: .2em 1em;
text-decoration: none;
}
.dynapagin-selector li a:hover {
background-color: #ebebeb;
}
.dynapagin-selector li.previous a {
border-left: 1px solid #d6d6d6;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.dynapagin-selector li.next a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.dynapagin-selector li.active a {
color: #ffffff;
background-color: #3379b5;
border: 1px solid #3379b5;
}
.dynapagin-selector li.disabled a {
color: #d6d6d6;
}
.dynapagin-selector li.disabled a:hover {
background-color: #ffffff;

4. The javascript.

<script>
$(function () { 
$('#dynapagin').dynapagin({
pager: false, // set to true to provide just previous and next buttons.
total: 10, // The number of pages that will be in the pagination.
page: 1, // The starting page to display. Defaults to first page.
previous: '&laquo;', // Text to use for previous button. Defaults to "«"
next: '&raquo;' // Text to use for next button. Defaults to "»"
}, function (page) {
$('#content').html('<em>Page '+page+'</em>!'); // do something
})
});
</script>

Change log:

v1.0.1 (2013-10-18)

  • Fixes bug where page event wasn't always recieving int.

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