Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

Code

The following is an example of using a table and applying tablePagination on the table to create rows per page and moving around the pages. Here is the css that was applied to the table.
          td { 
            border: 1px solid black; 
          }
          
          table { 
            border: thick solid black; width: 100%; 
          }
          
          #testTable { 
            width : 350px;
            margin-left: auto; 
            margin-right: auto; 
          }
          
          #tablePagination { 
            background-color: #DCDCDC; 
            font-size: 0.8em; 
            padding: 0px 5px; 
            height: 20px
          }
          
          #tablePagination_paginater { 
            margin-left: auto; 
            margin-right: auto;
          }
          
          #tablePagination img { 
            padding: 0px 2px; 
          }
          
          #tablePagination_perPage { 
            float: left; 
          }
          
          #tablePagination_paginater { 
            float: right; 
          }
        
The following is the JavaScript that was applied to the table.
          $('table').tablePagination({});
        

Demo

The following is a demo based off the css and JavaScript from above.



The following is a demo based off the above css and the following JavaScript from below:
            $('tbody tr:odd', $('#menuTable2')).hide(); //hiding rows for test
            var options = {
              currPage : 2, 
              ignoreRows : $('tbody tr:odd', $('#menuTable2')),
              optionsForRows : [2,3,5],
              rowsPerPage : 5,
              firstArrow : (new Image()).src="./images/firstBlue.gif",
              prevArrow : (new Image()).src="./images/prevBlue.gif",
              lastArrow : (new Image()).src="./images/lastBlue.gif",
              nextArrow : (new Image()).src="./images/nextBlue.gif",
              topNav : true
            }
            $('#menuTable2').tablePagination(options);
         

Usage

Download

Download the Source (uncompressed)
Download the Source (compressed)