admin@codemystery.com
info@codemystery.com
Home
About Us
Learn Code
Front-end Design
Bootstrap 3
Development
PHP Tutorial
WordPress Development
Admin Uses
WordPress
Make Money
Google Adsense
What if Google Ad-sense not accepted
Make Money From Blogger.com
Make Money From Youtube
Blog
Contact Us
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="/s/1c1fd0.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> <script src="/s/65a683.js" async defer></script></body> </html>
Result
