Download

Demo

Example Javascript
first prev next last
Name Level Sex Races Classes Location
Player1 45 female Orcs Death Knight Azeroth
Player2 5 female Orcs Death Knight Outland
Player3 70 female Blood Elves Warrior Azeroth
Player4 25 male Blood Elves Paladin Outland
Player5 25 male Trolls Mage Azeroth
Player6 47 female Humans Druid Outland
Player7 55 male Draenei Paladin Outland
Player8 67 male Night Elves Hunter Azeroth
Player9 39 male Tauren Druid Outland
Player10 37 male Tauren Priest Azeroth
Player11 39 male Gnomes Hunter Azeroth
Player12 17 female Gnomes Priest Outland
Player13 60 male Night Elves Hunter Northrend
Player14 56 female Dwarves Death Knight Northrend
Player15 35 female Night Elves Warrior Northrend
Player16 32 male Dwarves Warrior Azeroth
Player17 20 male Humans Warrior Northrend
Player18 15 male Gnomes Hunter Northrend
Player19 6 female Blood Elves Warrior Outland
Player20 64 female Tauren Mage Outland
Player21 37 female Dwarves Paladin Northrend
Player22 47 male Humans Priest Azeroth
Player23 7 male Tauren Shaman Azeroth
Player24 35 female Orcs Death Knight Outland
Player25 50 male Draenei Druid Azeroth
Player26 77 male Dwarves Paladin Azeroth
Player27 50 female Trolls Druid Northrend
Player28 34 female Undead Death Knight Outland
Player29 49 female Undead Shaman Northrend
Player30 3 male Humans Druid Northrend
Player55 80 male Gnomes Druid Northrend
Player56 46 female Tauren Shaman Outland
Player97 76 female Dwarves Warlock Azeroth
Player98 38 male Humans Paladin Azeroth
Player99 69 female Night Elves Paladin Azeroth
Player100 21 female Undead Rogue Northrend
$().ready(function(){
    
     demo = tablePager();

    
    demo.setPagerInfo($().val());
    $().text(demo1.pagerInfo());

    
    $().({
        demo.setPageSize($(this).val());
        demo.setPagerInfo($().val());
        $().text(demo.pagerInfo());
    })

    
    $().({
        demo.moveSetPage($().val());
        demo.setPagerInfo($().val());
        $().text(demo.pagerInfo());
    });
    $().({
        demo.moveFirstPage();
        $().text(demo.pagerInfo());
    });
    $().({
        demo.movePrevPage();
        $('#info').text(demo.pagerInfo());
    });
    $().({
        demo.moveNextPage();
        $().text(demo.pagerInfo());
    });
    $().({
        demo.moveLastPage();
        $().text(demo.pagerInfo());
    });
});

Getting started

include the jQuery library and the tablepager plugin inside the <head> tag of your HTML document:

<head>
  <script type="text/javascript" src="jquery-latest.js"></script>
  <script type="text/javascript" src="jquery.tablepager.js"></script>
</head>

alert tablepager works on standard HTML tables. You must include THEAD and TBODY tags like as :

<table>
  
    <tr> 
      <th>Last Name</th> 
      <th>First Name</th> 
      <th>Email</th> 
      <th>Due</th> 
      <th>Web Site</th> 
    </tr> 
  
  
    <tr> 
      <td>Smith</td> 
      <td>John</td> 
      <td>jsmith@gmail.com</td> 
      <td>$50.00</td> 
      <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
      <td>Bach</td> 
      <td>Frank</td> 
      <td>fbach@yahoo.com</td> 
      <td>$50.00</td> 
      <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
      <td>Doe</td> 
      <td>Jason</td> 
      <td>jdoe@hotmail.com</td> 
      <td>$100.00</td> 
      <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
      <td>Conway</td> 
      <td>Tim</td> 
      <td>tconway@earthlink.net</td> 
      <td>$50.00</td> 
      <td>http://www.timconway.com</td> 
    </tr> 
  
</table>

functions list

function Description
setPagerInfo() set pager info string
setPageSize() set page size
setCurrentPage() set current page number
pagerInfo() get the pager info
moveSetPage() move to assign number page
moveCurrentPage() move to the current page
moveFirstPage() move to the first page
moveLastPage() move to the last page
moveNextPage() move to the next page
movePrevPage() move to the previous page

Credits

Written by Liao, San-Kai.

Documentation written by Liao, San-Kai, based on Christian Bach great documention.

John Resig for the fantastic jQuery