quarta-feira, 23 de outubro de 2013

Paginação com jQuery - Como paginar uma table - Passar parametros para um arquivo js

   Esse tópico abrange dois assuntos uma parte (se não quase toda) mostra um script para paginação, e nesse mesmo script há um exemplo de como passar parâmetros para um aquivo .js, para tirarmos a "sujeira" do código e deixar o HTML apenas com o necessário.

   Existem varias maneiras de fazer uma paginação,  muitos componentes, inclusive do próprio .NET com a GridView(aspx) e WebGrid(cshtml), só que no caso eu precisava que não desse o post, então procurei em vários lugares por uma paginação simples de se utilizar, mais não consegui encontrar. Sempre havia varias referencias de .js e .css e o que eu queria era apenas a paginação simples alem disso precisava que o paginador não alterasse o layout da minha Table.

Bom então aqui está, com as seguintes funcionalidades:
1 - A principal paginar rs sem graça;
2 - O desenvolvedor passa por parâmetro a quantidade de itens que vão ser agrupados que posteriormente vão ser mostrados em um input select;
3 - Também são passados como parâmetro se os link's de primeira e ultima e próximo e anterior vão ser exibidas.

Como utilizar: É bem simples
Apos referenciar o arquivo js (Download) e css (Download) em apenas uma chamada o conteúdo da table já vai ser paginada, porem a table tem que estar com uma estrutura especifica:

 <table>
                <tbody id="tablePaginar">
                </tbody>
 </table>
<ul id="ulPaginacao" class="ul-paginacao">
</ul>

O restante do conteúdo (tr e td) podem estar da maneira que o desenvolvedor quiser.

E agora a chamada:

<script type="text/javascript">
   PAGINACAO.init(["tablePaginar", "ulPaginacao", 10, 1, true, true]);

   PAGINACAO.execscript();
</script>

os parâmetros são os seguintes:
{
      1 - Id do table que vai estar sendo paginado;
      2 - Id do ul que vai ser criado a paginação;
      3 - Quantidade de itens que vão ser exibidos na table;
      4 - Quantidade de elementos que vão ser exibidos no ul, sendo que, os dois primeiros e os dois últimos são fixos para grandes quantidades;
      5 - se mostra ou não os link's da primeira e ultima pagina;
      6 - se mostra ou não os link's da Anterior e Próxima pagina;
}

Clique aqui  para ver como fica a paginação.


   Só pra finalizar não é muito performático (se é que essa palavra existe) colocar 300 mil linhas nesse mesmo table, lembrando que ele fica na maquina do usuário e com algumas centenas de registros a pagina já começa a ficar um pouco lenta, então deve ser feito um outro tipo de paginação mais que é assunto para um outro dia!!!

Bom acho que é só isso e espero que ajude alguém ....