Client side Pagination

Question

I want to do client side pagination and used the Jquery suggestion as suggested here. 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

<div id="pager" class="pager">
    <form>
        <img src="../addons/pager/icons/first.png" class="first"/>
        <img src="../addons/pager/icons/prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="../addons/pager/icons/next.png" class="next"/>
        <img src="../addons/pager/icons/last.png" class="last"/>
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>

            <option value="20">20</option>
            <option value="30">30</option>
            <option  value="40">40</option>
        </select>
    </form>
  </div>

This is my Jquery script

<script type="text/javascript">
    $(function() {
        $(theTable)
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
    </script>

My table id is theTable.

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.

Solution 1

The are lots of examples available on DataTables you can download the examples along with the css and the javascripts required for it...

Also it is very easy to initialize here is a code sample :

Add the css and js(available in the downloaded zip file) required at the top

<style type="text/css" title="currentStyle">
        @import "../../media/css/demo_page.css";
        @import "../../media/css/demo_table.css";
    </style>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

The table with the id 'theTable'

<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>

    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 3.0</td>
        <td>Win 2k+ / OSX.3+</td>
        <td class="center">1.9</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Misc</td>
        <td>NetFront 3.1</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>

</tbody>

Now Intialize datatables by the following:

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#theTable').dataTable();
        } );
</script>

That will inialize datatable wit zero configs....

To set position of the pagination use the sDom feature

"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'

Notice the letters lfr, t,ip they stand for :

'l' - Length changing 'f' - Filtering input 't' - The table! 'i' - Information 'p' - Pagination 'r' - pRocessing

Just swap the places of these letters and get them where you want r/l by p

Solution 2

I would recommend using Datatables . Just follow the documentation. Let me know in case you face any problems. You just need to call the construction function to get started

$(document).ready(function() {
$('#tableid').dataTable();
} );

You can download the source files from here