TableSorter

Dynamically generate the "pager"

by hansenmc

HTML

<script src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css">
<div>

<table cellspacing="1" class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </tfoot>
    <tbody>
      <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Student02</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>90</td>
            <td>88</td>
            <td>100</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Student03</td>
            <td>Languages</td>
            <td>female</td>
            <td>85</td>
            <td>95</td>
            <td>80</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Student04</td>
            <td>Languages</td>
            <td>male</td>
            <td>60</td>
            <td>55</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Student05</td>
            <td>Languages</td>
            <td>female</td>
            <td>68</td>
            <td>80</td>
            <td>95</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Student06</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>100</td>
           ...

JavaScript

$(document).ready(function() { 
    //var pager= $("table").parent().find("div.pager");
    $("table").after('<div id="pager" class="pager"><form>       <img src="http://tablesorter.com/addons/pager/icons/first.png" class="first" />        <img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev" />        <input type="text" class="pagedisplay" />        <img src="http://tablesorter.com/addons/pager/icons/next.png" class="next" />        <img src="http://tablesorter.com/addons/pager/icons/last.png" class="last" />        <select class="pagesize">            <option value="1">1</option>            <option selected="selected" value="10">10</option> <option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option></select></form></div>');
    var pager = $("table").next();
    $("table") 
    .tablesorter({widthFixed: true, widgets:['zebra'] }) 
    .tablesorterPager({container: pager}); 
});