javascript - How to do pagination in jquery -
i new jquery. trying sorting , pagination here problem is displaying page number not contents on page. know doing wrong not able figure out wrong.
i know problem onpageclick not able figure out write there. tried examples given here not helping.
i posting code here.
<!doctype html> <html> <head> <script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script> <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script> <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script> <script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script> <script type="text/javascript" src="http://flaviusmatis.github.io/simplepagination.js/jquery.simplepagination.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#mytable").tablesorter(); } ); </script> <script type="text/javascript"> $(function() { $(".tablesorter").pagination({ items: 17, itemsonpage: 1, cssstyle: 'light-theme', onpageclick: function(pagenumber, event) { // callback triggered when page clicked // page number given optional parameter }, }); }); </script> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table id="mytable" class="tablesorter" style="width:50%"> <thead> <tr> <th><span>id</span></th> <th><span>name</span></th> <tr> <tbody> <td>1</td> <td>jill</td> </tr> <tr> <td>2</td> <td>bill</td> </tr> <tr> <td>3</td> <td>chill</td> </tr> <tr> <td>4</td> <td>chill</td> </tr> <tr> <td>5</td> <td>chill</td> </tr> <tr> <td>6</td> <td>chill</td> </tr> <tr> <td>7</td> <td>chill</td> </tr> <tr> <td>8</td> <td>chill</td> </tr> <tr> <td>9</td> <td>chill</td> </tr> <tr> <td>10</td> <td>chill</td> </tr> <tr> <td>11</td> <td>chill</td> </tr> <tr> <td>12</td> <td >chill</td> </tr> <tr> <td >13</td> <td>chill</td> </tr> <tr> <td>14</td> <td>chill</td> </tr> <tr> <td>15</td> <td>chill</td> </tr> <tr> <td>16</td> <td>chill</td> </tr> <tr> <td>17</td> <td>chill</td> </tr> </tbody> </table> </body> </html> please me
use following code in script
<!doctype html> <html> <head> <script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script> <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script> <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script> <script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script> <script type="text/javascript" src="http://flaviusmatis.github.io/simplepagination.js/jquery.simplepagination.js"></script> <script type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { $("table") .tablesorter({widthfixed: true, widgets: ['zebra']}) .tablesorterpager({container: $(".tablesorter")}); }); </script> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table id="mytable" class="" style="width:50%"> <thead> <tr> <th><span>id</span></th> <th><span>name</span></th> </tr> <tbody> <tr> <td>1</td> <td>jill</td> </tr> <tr> <td>2</td> <td>bill</td> </tr> <tr> <td>3</td> <td>chill</td> </tr> <tr> <td>4</td> <td>chill</td> </tr> <tr> <td>5</td> <td>chill</td> </tr> <tr> <td>6</td> <td>chill</td> </tr> <tr> <td>7</td> <td>chill</td> </tr> <tr> <td>8</td> <td>chill</td> </tr> <tr> <td>9</td> <td>chill</td> </tr> <tr> <td>10</td> <td>chill</td> </tr> <tr> <td>11</td> <td>chill</td> </tr> <tr> <td>12</td> <td >chill</td> </tr> <tr> <td >13</td> <td>chill</td> </tr> <tr> <td>14</td> <td>chill</td> </tr> <tr> <td>15</td> <td>chill</td> </tr> <tr> <td>16</td> <td>chill</td> </tr> <tr> <td>17</td> <td>chill</td> </tr> </tbody> </table> <div id="pager" class="tablesorter" style="top: 687px; position: absolute;"> <form> <img src="../addons/pager/icons/first.png" class="first"> <img src="../addons/pager/icons/prev.png" class="prev"> <input type="text" class="pagedisplay"> <img src="../addons/pager/icons/next.png" class="next"> <img src="../addons/pager/icons/last.png" class="last"> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> </body> </html> 
Comments
Post a Comment