Descrição
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.
[ Download:
jquery.tablefind-1.0.min.js.zip ]
[
Enviar nova versão ]
Versões atualizadas deste script (NOVO)
Publicado 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'
});
[ 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
Teste de Conexão
Abertura em Rosa Choque e Branco
Calculadora Javascript
Naum mostra source e nem deixa selecionar!!
Site completo
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
Indicar para um amigo
Escrever um script