Home
About Us
Tutorials
PHP Tutorials
wordpress theme development
Typescript Tutorials
Blog
Contact Us
Search
Home
»
%%sitename%%
»
Try Code for table row pagination
Try Code for table row pagination
Code
<!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>
Result
