Plugin para ordenar, paginar e pesquisar em tabelas HTML

Publicado por Raimundo Alves Portela (última atualização em 27/07/2012)

[ Hits: 9.680 ]

Homepage: http://portelanet.com

Download jquery.tablefind-1.0.min.js.zip

Download jquery.tablefind-1.1.min.js.zip (versão 2)




Configura uma tabela permitindo que ela seja pesquisada, ordenada e paginada

Uso o seguinte plugin que desenvolvi nos meus projetos e resolvi compartilhar com a comunidade (o mesmo ainda receberá alguns pequenos ajustes, mas já é perfeitamente utilizável)

Parte baseado na ideia do plugin: tablesorter.com, não fiz um fork dele, apenas usei por um mês e tive a necessidade de incrementar a pesquisa diretamente nos dados retornados na tabela, e para fazer o resto funcionar acabei escrevendo as demais funcionalidades também.

* Testado no Firefox >= 3.6, Internet Explorer >= 6 e Chrome

Para usar a tabela alvo deve ter a estrutura thead, tbody, conter o cabeçalho com th, e está dentro de um elemento qualquer, como um div com id='relatorio', bastando no seu código java script usar:

   $('#relatorio').tablefind();

- Ordenar:
A ordenação é padrão, basta clicar sobre o título (th) da coluna desejada e a tabela será ordenada (alguns dados ainda carecem de uma melhor adaptação do plugin para que a ordenação seja mais eficaz, estarei desenvolvendo...).

- Paginar:
Para adicionar a possibilidade de paginar coloque dentro do seu div, elementos com as seguintes classes css (o que também pode ser alterado, caso você precisar):
<a href='#' class='first'>Primeiro</a>
<a href='#' class='prev'>Anterior</a>
<a href='#' class='next'>Próximo</a>
<a href='#' class='last'>Último</a>

Adicionalmente você pode colocar um input para exibir o total de páginas e a página atual, permitindo ainda que o usuário insira diretamente o número da página que deseja visualizar:

<input type='text' class='pagedisplay' />

Pesquisar:
Para permitir a pesquisa na tabela, basicamente temos que usar os seguintes componentes dentro do div que contém a tabela e os demais ítens:

<select class='findselect'></select>
<input type='text' class='find'/>

* Esse e o uso básico.

Pra mais exemplos de uso e o manual, que ainda estrou construindo, acessem: http://portela.tendalinux.com/projetos

* Qualquer feedback será muito bem vindo.

  



Versões atualizadas deste script

Versão 2 - Enviado por Raimundo Alves Portela em 26/07/2012

Changelog: Adicionado opção para informar colunas com tipo de dados em moeda e data:

$('#elemento').tablefind({
fmtPrice: '2,6',
fmtDate: '3'
});

* Os demais campos são ordenados normalmente.

Também foi adaptado o modo de informar as colunas a ignorar na ordenação e na pesquisa:

$('#elemento').tablefind({
findColsIgnore: '2,6',
sorterColsIgnore: '3'
});

Download jquery.tablefind-1.1.min.js.zip


Esconder código-fonte

/*
 * jQuery TableFind 1.0 - http://portela.tendalinux.com?go=tablefind
 *
 * Configura uma tabela permitindo que ela seja pesquisada, ordenada e paginada
 * Desenvolvido por Raimundo Portela (rai3mb@gmail.com)
 * Parte baseado na ideia (não no código) do maravilhoso plugin: tablesorter.com
 * ============================================================================
 * Sets a table allowing it to be searched, sorted and paged
 * Developed by Raymond Portela (rai3mb@gmail.com)
 * Part based on the idea (not in code) of the wonderful plugin: tablesorter.com
 *
 * Licence:
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 */
;(function($){$.fn.tablefind=function(op){var def={label:'TODOS',cssFind:'.find',cssSelect:'.findselect',findColsIgnore:new Array('n'),sorterColsIgnore:new Array('n'),cssNext:'.next',cssPrev:'.prev',cssFirst:'.first',cssLast:'.last',cssPageDisplay:'.pagedisplay',cssPageSize:'.pagesize',cssPageCount: '.pagecount',cssDesc:'.th_desc',cssAsc:'.th_asc',cssDef:'.th_def',cssOdd:'.odd',cssHover:'.hover',pageSize:10,sorter:true,find:true};var set=$.extend({},def,op);return this.each(function(){var reg=new Array();var rows=new Array();var rsL=new Array();var o=$(this);var l=0;var nowPage=1;var lastPage=1;var ord=new Array();var pSize=10;if(! isNaN(set.pageSize))pSize=set.pageSize;var p=parseInt($(set.cssPageSize,o).val());if(p==0||isNaN(p))pSize=set.pageSize;else pSize=p;set.cssDef=set.cssDef.substring(1);set.cssAsc=set.cssAsc.substring(1);set.cssDesc=set.cssDesc.substring(1);set.cssOdd=set.cssOdd.substring(1);set.cssHover=set.cssHover.substring(1);$('table > tbody > tr',o).each(function(){ reg[l]=new Array();var c=0;rows[l]=$(this).html();$(this).find('td').each(function(){reg[l][c]=$(this).text();c++;});l++;});var rsRows=rows;if(set.find){var c=new Array();c[0]='<option value=0>'+set.label+'</option>';var i=1;$('table > thead > tr:last > th',o).each(function(){for(x=0;x<set.findColsIgnore.length;x++){if(set.findColsIgnore[x].indexOf(i)==-1){c[i]='<option value='+i+'>'+$(this).text()+'</option>';break;}}i++;});$(set.cssSelect,o).append(c.join());$(set.cssFind,o).keyup(function(){var t=$(this).val().toLowerCase();var x=0;var rs=new Array();rsL=new Array();if(t.length>0){var tip=$(set.cssSelect,o).val();for(l=0;l<reg.length;l++){if(tip==0){for(c=0;c<reg[l].length;c++){if(reg[l][c].toLowerCase().search(t)>-1){rs[x]=rows[l];rsL[x]=l;x++;break;}}}else{for(c=0;c<reg[l].length;c++){if(c+1==tip)if(reg[l][c].toLowerCase().search(t)>-1){rs[x]=rows[l];rsL[x]=l;x++;break;}}}}} else{rs=rows;for(l=0;l<rows.length;l++)rsL[l]=l;$('.'+set.cssDef,o).removeClass(set.cssAsc+' '+set.cssDesc);}rsRows=rs;nowPage=1; _move();});} _move();if(set.sorter) _setSorter();function _upPageCount(){lastPage=1;var qtd=rsRows.length;while((qtd-pSize)>0){lastPage++;qtd-=pSize;}$(set.cssPageDisplay,o).attr('value',nowPage+'/'+lastPage);$(set.cssPageCount,o).html(rsRows.length);} function _move(){$('table > tbody',o).empty();var i=((nowPage-1)*pSize);var u=i+pSize;if(rsRows.length<u)u=rsRows.length;for(l=i;l<u;l++){$('table > tbody',o).append('<tr>'+rsRows[l]+'</tr>');} _upPageCount(); _modelTab();}function _modelTab(){$('table > tbody > tr:odd',o).addClass(set.cssOdd);$('table > tbody > tr',o).hover(function(){$(this).toggleClass(set.cssHover);});} $(set.cssNext,o).live('click',function(e){e.preventDefault();nowPage++;if(nowPage>lastPage)nowPage=lastPage; _move();});$(set.cssPrev,o).live('click',function(e){e.preventDefault();nowPage--;if (nowPage<1)nowPage=1; _move();});$(set.cssFirst,o).live('click',function(e){e.preventDefault();nowPage=1; _move();});$(set.cssLast,o).live('click',function(e){e.preventDefault();nowPage=lastPage; _move();});$(set.cssPageSize,o).live('change',function(e){e.preventDefault();pSize=Number($(this).val());if(isNaN(pSize)||pSize<1)pSize=set.pageSize;$(this).val(pSize);nowPage=1; _move();});$(set.cssPageDisplay, o).live('change',function(e){e.preventDefault();nowPage=$(this).val();if(isNaN(nowPage)||nowPage<1)nowPage=1;if(nowPage>lastPage)nowPage=lastPage; _move();});function _setSorter(){for (l=0;l<rows.length;l++)rsL[l]=l;var i=1;$('table > thead > tr:last > th',o).each(function(){for(x=0;x<set.sorterColsIgnore.length;x++){if(set.sorterColsIgnore[x].indexOf(i)==-1){$(this).attr('class',set.cssDef);$(this).css('cursor', 'pointer');ord[i-1]='a';break;}}i++;});$('.'+set.cssDef,o).live('click',function(){var id=$(this).index(); _sorter(id);$('.'+set.cssDef,o).removeClass(set.cssAsc+' '+set.cssDesc);if(ord[id]=='a') {$(this).addClass(set.cssAsc);ord[id]='d';}else{$(this).addClass(set.cssDesc);ord[id]='a';}});}function _sorter(id){var fila=new Array();var x=0;for(l=0;l<reg.length;l++){if(l==rsL[x]){for(c=0;c <reg[l].length;c++){if(c==id){fila[x]=reg[l][c]+'.'+l;break;}}x++;}}if(ord[id]=='d'){if(isNaN(fila[0])){fila.sort();fila.reverse();}else fila.sort(function(a,b){return b-a;});}else{if(isNaN(fila[0]))fila.sort();else fila.sort(function(a,b){return a-b;});}var rs=new Array();for(l=0;l<fila.length;l++){var pi=fila[l].lastIndexOf('.');var i=fila[l].substr(pi+1);rs[l]=rows[i];}rsRows=rs; nowPage=1; _move();}});};})(jQuery);


Scripts recomendados

getNodesByName

Acre 98.1 FM

script para colocar relogio e data na pagina

Teste de Conexão

Identificando o navegador do cliente


  

Comentários
[1] Comentário enviado por euqirneh66 em 26/07/2012 - 09:01h

Extremamente útil e bem escrito! Parabéns!
Essa paginação, teria como isolar ela e acha que valeria a pena utilizar pra outro tipo de listagem de conteúdo?

[2] Comentário enviado por rai3mb em 26/07/2012 - 09:22h

Obrigado.
Que tipo de listagem de conteúdo? As páginas do site? Ou slides de imagem?
Da forma como foi feito o plugin, funciona para dados tabulares tanto que internamente uso Array de Array, para outra finalidade, seria necessário construir outro plugin, mas plugin de slides já existe de montão ;-)

[3] Comentário enviado por euqirneh66 em 26/07/2012 - 10:54h

Na verdade não estava pensando em slide, estava pensando em paginar alguma coisa parecida como as gravatas de notícias em divs, acho que seria uma boa usar seu plugin pra isso, agilizaria pra caramba a vida!
Mas, entendi a mensagem! =)

[4] Comentário enviado por rai3mb em 26/07/2012 - 11:19h

Da pra fazer o comportamento deve ser parecido com slides, só deve ser avaliado se o conteúdo deve ou não ser atualizado.

No plugin tablefind, a grande vantagem é que os dados já estão no cliente, ao mudar de página e/ou fazer pesquisa não há uma nova consulta no servidor, os dados utilizados estão no cliente (no javascript). Se houver a necessidade de atualizar, basta trazer os novos dados da tabela e substituir os dados do div, invocando novamente o plugin ;-).

[5] Comentário enviado por euqirneh66 em 26/07/2012 - 11:38h

Valeu pelo toque aí cara! =D


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts