Hi, In this post we are going to discuss how to make a javascript pagination of a table and an unordered list (ul li). For that, we have to include 2 javascript libraries.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
the ul or table we want to make pageable, have to keep inside a div with an id, the id will be used for the js function we are going to write to call the pagination function.
We have to keep the pagination menu or the pager inside the div with the id we are calling from the js function for pagination.
Also, have to write some CSS code to make the pagination look good.
Now find the code below, for both pagination of the table and unordered list.
Code for Unordered list (ul li) pagination
<!DOCTYPE html>
<html>
<head>
<title>Pagination of unordered list Using js</title>
<style type="text/css">
.my-navigation div {
/*float: left;*/
display: inline-block;
}
.my-navigation {
text-align: center;
}
.nav-wrap {
padding-top: 0.5em;
margin: 0px auto;
}
.simple-pagination-page-numbers a {
width: 2rem;
padding: 0.5em;
text-align: center;
}
.simple-pagination-page-numbers {}
.simple-pagination-previous,
.simple-pagination-next {
padding-bottom: 0.5em;
}
</style>
</head>
<body>
<div id="paginating_div">
<div>
<div>
<h4>Pagination of unordered list Using js</h4>
</div>
</div>
<div>
<div>
<ul class="gallery_inne">
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
<li>Lorem ipsum dolar ipsum</li>
</ul>
</div>
</div>
<div class="my-navigation">
<div class="simple-pagination-first"></div>
<div class="simple-pagination-previous"></div>
<div class="simple-pagination-page-numbers"></div>
<div class="simple-pagination-next"></div>
<div class="simple-pagination-last"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#paginating_div').simplePagination({
items_per_page: 6,
pagination_container: '.gallery_inne',
items_per_page_content: {
'Six': 6,
'Eleven': 11,
'Seventeen': 17,
'Thirty-three': 33,
'Sixty-seven': 67
}
});
});
</script>
</body>
</html>
Code for table row pagination
<!DOCTYPE html>
<html>
<head>
<title>Pagination of html table Using js</title>
<style type="text/css">
.my-navigation div {
/*float: left;*/
display: inline-block;
}
.my-navigation {
text-align: center;
}
.nav-wrap {
padding-top: 0.5em;
margin: 0px auto;
}
.simple-pagination-page-numbers a {
width: 2rem;
padding: 0.5em;
text-align: center;
}
.simple-pagination-page-numbers {}
.simple-pagination-previous,
.simple-pagination-next {
padding-bottom: 0.5em;
}
</style>
</head>
<body>
<div>
<h4>Pagination of html table Using js</h4>
</div>
<div id="paginating_div">
<table>
<tbody>
<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr><td>Five</td></tr>
<tr><td>Six</td></tr>
<tr><td>Seven</td></tr>
<tr><td>Eight</td></tr>
<tr><td>Nine</td></tr>
<tr><td>Ten</td></tr>
<tr><td>Eleven</td></tr>
<tr><td>Twelve</td></tr>
<tr><td>Thirteen</td></tr>
<tr><td>Fourteen</td></tr>
<tr><td>Fifteen</td></tr>
<tr><td>Sixteen</td></tr>
<tr><td>Seventeen</td></tr>
<tr><td>Eighteen</td></tr>
<tr><td>Nineteen</td></tr>
<tr><td>Twenty</td></tr>
<tr><td>Twenty-one</td></tr>
<tr><td>Twenty-two</td></tr>
<tr><td>Twenty-three</td></tr>
<tr><td>Twenty-four</td></tr>
<tr><td>Twenty-five</td></tr>
<tr><td>Twenty-six</td></tr>
<tr><td>Twenty-seven</td></tr>
<tr><td>Twenty-eight</td></tr>
<tr><td>Twenty-nine</td></tr>
<tr><td>Thirty</td></tr>
<tr><td>Thirty-one</td></tr>
<tr><td>Thirty-two</td></tr>
<tr><td>Thirty-three</td></tr>
<tr><td>Thirty-four</td></tr>
<tr><td>Thirty-five</td></tr>
<tr><td>Thirty-six</td></tr>
<tr><td>Thirty-seven</td></tr>
<tr><td>Thirty-eight</td></tr>
<tr><td>Thirty-nine</td></tr>
<tr><td>Forty</td></tr>
<tr><td>Forty-one</td></tr>
<tr><td>Forty-two</td></tr>
<tr><td>Forty-three</td></tr>
<tr><td>Forty-four</td></tr>
<tr><td>Forty-five</td></tr>
<tr><td>Forty-six</td></tr>
<tr><td>Forty-seven</td></tr>
<tr><td>Forty-eight</td></tr>
<tr><td>Forty-nine</td></tr>
<tr><td>Fifty</td></tr>
<tr><td>Fifty-one</td></tr>
<tr><td>Fifty-two</td></tr>
<tr><td>Fifty-three</td></tr>
<tr><td>Fifty-four</td></tr>
<tr><td>Fifty-five</td></tr>
<tr><td>Fifty-six</td></tr>
<tr><td>Fifty-seven</td></tr>
<tr><td>Fifty-eight</td></tr>
<tr><td>Fifty-nine</td></tr>
<tr><td>Sixty</td></tr>
<tr><td>Sixty-one</td></tr>
<tr><td>Sixty-two</td></tr>
<tr><td>Sixty-three</td></tr>
<tr><td>Sixty-four</td></tr>
<tr><td>Sixty-five</td></tr>
<tr><td>Sixty-six</td></tr>
<tr><td>Sixty-seven</td></tr>
<tr><td>Sixty-eight</td></tr>
<tr><td>Sixty-nine</td></tr>
<tr><td>Seventy</td></tr>
<tr><td>Seventy-one</td></tr>
<tr><td>Seventy-two</td></tr>
<tr><td>Seventy-three</td></tr>
<tr><td>Seventy-four</td></tr>
<tr><td>Seventy-five</td></tr>
<tr><td>Seventy-six</td></tr>
<tr><td>Seventy-seven</td></tr>
<tr><td>Seventy-eight</td></tr>
<tr><td>Seventy-nine</td></tr>
<tr><td>Eighty</td></tr>
<tr><td>Eighty-one</td></tr>
<tr><td>Eighty-two</td></tr>
<tr><td>Eighty-three</td></tr>
<tr><td>Eighty-four</td></tr>
<tr><td>Eighty-five</td></tr>
<tr><td>Eighty-six</td></tr>
<tr><td>Eighty-seven</td></tr>
<tr><td>Eighty-eight</td></tr>
<tr><td>Eighty-nine</td></tr>
<tr><td>Ninety</td></tr>
<tr><td>Ninety-one</td></tr>
<tr><td>Ninety-two</td></tr>
<tr><td>Ninety-three</td></tr>
<tr><td>Ninety-four</td></tr>
<tr><td>Ninety-five</td></tr>
<tr><td>Ninety-six</td></tr>
<tr><td>Ninety-seven</td></tr>
<tr><td>Ninety-eight</td></tr>
<tr><td>Ninety-nine</td></tr>
<tr><td>One hundred</td></tr>
<tr><td>One hundred one</td></tr>
<tr><td>One hundred two</td></tr>
<tr><td>One hundred three</td></tr>
<tr><td>One hundred four</td></tr>
<tr><td>One hundred five</td></tr>
<tr><td>One hundred six</td></tr>
<tr><td>One hundred seven</td></tr>
<tr><td>One hundred eight</td></tr>
<tr><td>One hundred nine</td></tr>
<tr><td>One hundred ten</td></tr>
<tr><td>One hundred eleven</td></tr>
<tr><td>One hundred twelve</td></tr>
<tr><td>One hundred thirteen</td></tr>
<tr><td>One hundred fourteen</td></tr>
<tr><td>One hundred fifteen</td></tr>
<tr><td>One hundred sixteen</td></tr>
<tr><td>One hundred seventeen</td></tr>
<tr><td>One hundred eighteen</td></tr>
<tr><td>One hundred nineteen</td></tr>
<tr><td>One hundred twenty</td></tr>
<tr><td>One hundred twenty-one</td></tr>
<tr><td>One hundred twenty-two</td></tr>
<tr><td>One hundred twenty-three</td></tr>
<tr><td>One hundred twenty-four</td></tr>
<tr><td>One hundred twenty-five</td></tr>
<tr><td>One hundred twenty-six</td></tr>
<tr><td>One hundred twenty-seven</td></tr>
<tr><td>One hundred twenty-eight</td></tr>
<tr><td>One hundred twenty-nine</td></tr>
<tr><td>One hundred thirty</td></tr>
<tr><td>One hundred thirty-one</td></tr>
<tr><td>One hundred thirty-two</td></tr>
<tr><td>One hundred thirty-three</td></tr>
<tr><td>One hundred thirty-four</td></tr>
<tr><td>One hundred thirty-five</td></tr>
<tr><td>One hundred thirty-six</td></tr>
<tr><td>One hundred thirty-seven</td></tr>
<tr><td>One hundred thirty-eight</td></tr>
<tr><td>One hundred thirty-nine</td></tr>
<tr><td>One hundred forty</td></tr>
<tr><td>One hundred forty-one</td></tr>
<tr><td>One hundred forty-two</td></tr>
<tr><td>One hundred forty-three</td></tr>
<tr><td>One hundred forty-four</td></tr>
<tr><td>One hundred forty-five</td></tr>
<tr><td>One hundred forty-six</td></tr>
<tr><td>One hundred forty-seven</td></tr>
<tr><td>One hundred forty-eight</td></tr>
<tr><td>One hundred forty-nine</td></tr>
<tr><td>One hundred fifty</td></tr>
<tr><td>One hundred fifty-one</td></tr>
<tr><td>One hundred fifty-two</td></tr>
<tr><td>One hundred fifty-three</td></tr>
<tr><td>One hundred fifty-four</td></tr>
<tr><td>One hundred fifty-five</td></tr>
<tr><td>One hundred fifty-six</td></tr>
<tr><td>One hundred fifty-seven</td></tr>
<tr><td>One hundred fifty-eight</td></tr>
<tr><td>One hundred fifty-nine</td></tr>
<tr><td>One hundred sixty</td></tr>
<tr><td>One hundred sixty-one</td></tr>
<tr><td>One hundred sixty-two</td></tr>
<tr><td>One hundred sixty-three</td></tr>
<tr><td>One hundred sixty-four</td></tr>
<tr><td>One hundred sixty-five</td></tr>
<tr><td>One hundred sixty-six</td></tr>
<tr><td>One hundred sixty-seven</td></tr>
<tr><td>One hundred sixty-eight</td></tr>
<tr><td>One hundred sixty-nine</td></tr>
<tr><td>One hundred seventy</td></tr>
<tr><td>One hundred seventy-one</td></tr>
<tr><td>One hundred seventy-two</td></tr>
<tr><td>One hundred seventy-three</td></tr>
<tr><td>One hundred seventy-four</td></tr>
<tr><td>One hundred seventy-five</td></tr>
<tr><td>One hundred seventy-six</td></tr>
<tr><td>One hundred seventy-seven</td></tr>
<tr><td>One hundred seventy-eight</td></tr>
<tr><td>One hundred seventy-nine</td></tr>
<tr><td>One hundred eighty</td></tr>
<tr><td>One hundred eighty-one</td></tr>
<tr><td>One hundred eighty-two</td></tr>
<tr><td>One hundred eighty-three</td></tr>
<tr><td>One hundred eighty-four</td></tr>
<tr><td>One hundred eighty-five</td></tr>
<tr><td>One hundred eighty-six</td></tr>
<tr><td>One hundred eighty-seven</td></tr>
<tr><td>One hundred eighty-eight</td></tr>
<tr><td>One hundred eighty-nine</td></tr>
<tr><td>One hundred ninety</td></tr>
<tr><td>One hundred ninety-one</td></tr>
<tr><td>One hundred ninety-two</td></tr>
<tr><td>One hundred ninety-three</td></tr>
<tr><td>One hundred ninety-four</td></tr>
<tr><td>One hundred ninety-five</td></tr>
<tr><td>One hundred ninety-six</td></tr>
<tr><td>One hundred ninety-seven</td></tr>
<tr><td>One hundred ninety-eight</td></tr>
<tr><td>One hundred ninety-nine</td></tr>
<tr><td>Two hundred</td></tr>
</tbody>
</table>
<div class="my-navigation">
<div class="simple-pagination-first"></div>
<div class="simple-pagination-previous"></div>
<div class="simple-pagination-page-numbers"></div>
<div class="simple-pagination-next"></div>
<div class="simple-pagination-last"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#paginating_div').simplePagination({
items_per_page: 5,
items_per_page_content: {
'Six': 6,
'Eleven': 11,
'Seventeen': 17,
'Thirty-three': 33,
'Sixty-seven': 67
}
});
});
</script>
</body>
</html>
We have seen how to make pagination using js in this post. please comment below to make the site better.
Thanks for reading