In this artical we learn how we can create pagination only with javascript. we added some css to style it.
we create a javascript function in which we only need to pass no. of total rows, row per page and selected pageno.
Pagination created by using no. of pages, row per page and select pageno. from selected pageno value.
lets start:--
<div id="pagination"></div>
<script>
function jspagination(totalrows, selectedpage) {
var rowperpage = 10;
// we can dynamic select row per page by using dropdown list like as below.
//document.getElementById('ddlrowsperpage').value;
//calculate no. of pages required from totalrows and row per page start:-
if (totalrows <= rowperpage) {
totalrows = 1;
}
else {
var pagee;
if (totalrows % rowperpage == 0) {
pagee = totalrows / rowperpage;
}
else {
pagee = Math.trunc(totalrows / rowperpage) +1;
}
totalrows = pagee;
}
//calculate no. of pages required from totalrows and row per page end:-
//now totalrows contains that how many pages are required.
var Pagination = {
code: '',
Extend: function(data) {
data = data || {};
Pagination.size = data.size || totoalpeages;
Pagination.page = data.page || selectedpage;
Pagination.step = data.step || 3;
},
Add: function(s, f) {
for (var i = s; i < f; i++) {
Pagination.code += '<a>' + i + '</a>';
}
},
Last: function() {
Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
},
First: function() {
Pagination.code += '<a>1</a><i>...</i>';
},
Click: function() {
Pagination.page = +this.innerHTML;
Pagination.Start();
var pageno = this.innerHTML;
//we can call another function to bind data after click on page no. like below.
//tablebind(pageno, rowperpage);
},
Prev: function() {
Pagination.page--;
if (Pagination.page < 1) {
Pagination.page = 1;
}
Pagination.Start();
var pageno = Pagination.page;
//we can call another function to bind data after click on prev button in pagination like // below.
//tablebind(pageno, rowperpage);
},
Next: function() {
Pagination.page++;
if (Pagination.page > Pagination.size) {
Pagination.page = Pagination.size;
}
Pagination.Start();
var pageno = Pagination.page;
//we can call another function to bind data after click on next button in pagination like // below.
//tablebind(pageno, rowperpage);
},
Bind: function () {
var a = Pagination.e.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
var aaa = +a[i].innerHTML;
if (+a[i].innerHTML == selectedpage) a[i].className = 'current';
a[i].addEventListener('click', Pagination.Click, false);
}
},
Finish: function() {
Pagination.e.innerHTML = Pagination.code;
Pagination.code = '';
Pagination.Bind();
},
Start: function () {
if (Pagination.size < Pagination.step * 2 + 6) {
Pagination.Add(1, Pagination.size + 1);
}
else if (Pagination.page < Pagination.step * 2 + 1) {
Pagination.Add(1, Pagination.step * 2 + 4);
Pagination.Last();
}
else if (Pagination.page > Pagination.size - Pagination.step * 2) {
Pagination.First();
Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
}
else {
Pagination.First();
Pagination.Add(parseInt(selectedpage) - 3, parseInt(selectedpage) + 4);
Pagination.Last();
}
Pagination.Finish();
},
Buttons: function(e) {
var nav = e.getElementsByTagName('a');
nav[0].addEventListener('click', Pagination.Prev, false);
nav[1].addEventListener('click', Pagination.Next, false);
},
Create: function(e) {
var html = [
'<a>←</a>', // previous button
'<span></span>', // pagination container
'<a>→</a>' // next button
];
e.innerHTML = html.join('');
Pagination.e = e.getElementsByTagName('span')[0];
Pagination.Buttons(e);
},
Init: function(e, data) {
Pagination.Extend(data);
Pagination.Create(e);
Pagination.Start();
}
};
function page(){
Pagination.Init(document.getElementById('pagination'), {
size: totalrows, // pages size
page: selectedpage, // selected page
step: 3 // pages before and after current
});
};
page();
}
//we can call above function anywhere we required pagination
//like :--- jspagination(20,1);
</script>
//we add some css to make its perfect in look wise also.
<style>
#pagination {
display: inline-block;
vertical-align: middle;
border-radius: 4px;
padding: 1px 2px 4px 2px;
}
#pagination a, #pagination i {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
cursor:pointer;
}
#pagination a {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
cursor:pointer;
}
#pagination i {
margin: 0 3px 0 3px;
}
#pagination a.current {
z-index: 2;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
</style>
//Finally we create pagination with javascript and css. now we can use it anywhere and in any project.
0 Comments