title: Client side Pagination
body: <p>I want to do client side pagination and used the Jquery suggestion as suggested <a href="https://stackoverflow.com/questions/723459/client-side-pagination">here</a>.
  There are few issues in using that script.One the paging icons always come at the bottom no matter what we set the position on the pager div.Plus my table  has some data size inconsistenzies and hence may have a varying size page to page.Because of this the table size varies drastically but the pager remains fixed casuing overlap.I tried div to serperate but of no use.Here is my pager code</p>
  
  <pre><code>&lt;div id="pager" class="pager"&gt;
      &lt;form&gt;
          &lt;img src="../addons/pager/icons/first.png" class="first"/&gt;
          &lt;img src="../addons/pager/icons/prev.png" class="prev"/&gt;
          &lt;input type="text" class="pagedisplay"/&gt;
          &lt;img src="../addons/pager/icons/next.png" class="next"/&gt;
          &lt;img src="../addons/pager/icons/last.png" class="last"/&gt;
          &lt;select class="pagesize"&gt;
              &lt;option selected="selected"  value="10"&gt;10&lt;/option&gt;
  
              &lt;option value="20"&gt;20&lt;/option&gt;
              &lt;option value="30"&gt;30&lt;/option&gt;
              &lt;option  value="40"&gt;40&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my Jquery script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $(theTable)
              .tablesorter({widthFixed: true, widgets: ['zebra']})
              .tablesorterPager({container: $("#pager")});
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>My table id is theTable.</p>
  
  <p>I want to place the pager code to come at the top so that the size of my table does not affect the pagination icons.</p>