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ã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);

editor de texto em Javascript

Objetos, Arrays e Métodos

Menu DHTML - Abre/fecha com clique do mouse

Relógio Modo Texto.

Palheta de cores utilizando Json e javascript não obstrutivo