Home
About Us
Tutorials
PHP Tutorials
wordpress theme development
Typescript Tutorials
Blog
Contact Us
Search
Home
»
%%sitename%%
»
Try Code for Unordered list (ul li) pagination
Try Code for Unordered list (ul li) pagination
Code
<!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>
Result
