Basicamente seus dados terão que ficar em uma tabela com thead e tbody, exemplo:
<table id='tb_relatorio' class='tablesorter'>
<thead>
<tr>
<th> DESPESA </th><th> DATA </th><th> VALOR </th><th> STATUS </th><th> DATA STATUS </th>
</tr>
</thead>
<tbody>
<tr>
<td>LANCHE</td>
<td>20120628</td>
<td>68</td>
<td>PAGO</td>
<td>20120628</td>
</tr>
<tr>
<td>ALUGUEL</td>
<td>20120629</td>
<td>566</td>
<td>PAGO</td>
<td>20120628</td>
</tr>
<tr>
<td>ENERGIA</td>
<td>20120627</td>
<td>120</td>
<td>PENDENTE</td>
<td>20120628</td>
</tr>
</tbody>
</table>
<div id='paginacao'>
<button class='first'>Primeiro</button>
<button class='prev'>Anterior</button>
<input type='text' class='pagedisplay' disabled='true' />
<button class='next'>Próximo</button>
<button class='last'>Último</button>
<input type='hidden' id='pagesize' class='pagesize' value='10'><br/>
</div>
No seu index, carrego os plugins jquery, jquery.tablesorter e jquery.tablesorter.pager:
* Obrigatório
<script src="jquery-1.7.2.min.js" language="JavaScript"></script>
<script src="jquery.tablesorter.pager.js" language="JavaScript"></script>
<script src="jquery.tablesorter.min.js" language="JavaScript"></script>
Agora no seu código javascript faça:
$(document).ready(function() {
$('#tb_relatorio').tablesorter();
.tablesorterPager({container: $("#paginacao")})
});
Resumindo:
> Crie a tabela com a estrutura thead, tbody
> Crie o div de paginação, onde os botões ou links devem ter as class especificadas, first, prev, etc...
> o
<input type='hidden' id='pagesize' class='pagesize' value='10'><br/>
configura a quantidade de registro por pagina
> Nos seus códigos javascript configure o id da tabela para o plugin
tablesorter e para o
tablesorterPager
Você vai ver que isso ajuda bastante ;-), faça seus testes, se ainda não entendeu não tem problema, continuaremos na parte que vc teve problemas...