NeoAlchemy » Table Pagination

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.

Item	Cost	Description
No. 1	$1.50	Fake Description
No. 2	$2.50	Made up word
No. 3	$6.63	Something is a Something
No. 4	$1.20	Blah Blah
No. 5	$1.11	Great one dude
No. 6	$6.42	Have no idea what to type
No. 7	$2.52	Sometimes you feel like a nut
No. 8	$4.51	Snickers
No. 9	$1.21	That's mmm mmm good
No. 10	$0.99	Pizza
No. 11	$3.99	Root Beer Floats
No. 12	$5.99	Large bag of Gumdrops

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"
            }
            $('#menuTable2').tablePagination(options);

Item	Cost	Description
No. 1	$1.50	Fake Description
No. 2	$2.50	Made up word
No. 3	$6.63	Something is a Something
No. 4	$1.20	Blah Blah
No. 5	$1.11	Great one dude
No. 6	$6.42	Have no idea what to type
No. 7	$2.52	Sometimes you feel like a nut
No. 8	$4.51	Snickers
No. 9	$1.21	That's mmm mmm good
No. 10	$0.99	Pizza
No. 11	$3.99	Root Beer Floats
No. 12	$5.99	Large bag of Gumdrops

Usage

firstArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/first.gif"
prevArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/prev.gif"
lastArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/last.gif"
nextArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/next.gif"
rowsPerPage - Number - used to determine the starting rows per page. Default: 5
currPage - Number - This is to determine what the starting current page is. Default: 1
optionsForRows - Array - This is to set the values on the rows per page. Default: [5,10,25,50,100]
ignoreRows - Array - This is to specify which 'tr' rows to ignore. It is recommended that you have those rows be invisible as they will mess with page counts. Default: []

Download

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