Problemas com tablesorter


(Ailime Rodrigues) #1

Bom dia. Gostaria de saber se é possível manipular a pesquisa do tablesorter?

Tenho uma lista com vários registros e páginas porem quando mando pesquisar, só é pesquisado pela pagina. Como faço para pesquisar em toda a tabela??

Segue o código do tablesorter:

    <script>
    $(function(){
      $('table > tbody > tr:odd').addClass('odd');
      $('table > tbody > tr').hover(function(){
        $(this).toggleClass('hover');
      });
      $('#marcar-todos').click(function(){
        $('table > tbody > tr > td > :checkbox')
          .attr('checked', $(this).is(':checked'))
          .trigger('change');
      });
      $('table > tbody > tr > td > :checkbox').bind('click change', function(){
        var tr = $(this).parent().parent();
        if($(this).is(':checked')) $(tr).addClass('selected');
        else $(tr).removeClass('selected');
      });
      $('form').submit(function(e){ e.preventDefault(); });
      $('#pesquisar').keydown(function(){
        var encontrou = false;
        var termo = $(this).val().toLowerCase();
        $('table > tbody > tr').each(function(){
          $(this).find('td').each(function(){
            if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
          });
          if(!encontrou) $(this).hide();
          else $(this).show();
          encontrou = false;
        });
      });
      $("table").tablesorter({
          dateFormat: 'uk',
			sortList: [[0,0], [1,0]]
        }) 
        .tablesorterPager({container: $("#pager")})
        .bind('sortEnd', function(){
          $('table > tbody > tr').removeClass('odd');
          $('table > tbody > tr:odd').addClass('odd');
        });
    });
    </script>

(Ailime Rodrigues) #2

Alguém sabe me ajudar nesse problema?


(Luan Maik) #4

Veja se este exemplo lhe ajuda:

http://jsfiddle.net/Mottie/856bzzeL/117/

Sei q não é exatamente o que procura, mas talvez ajude.

No código que vc mostrou, está sendo pesquisado na estrutura da tabela visualizada, o correto seria pesquisar na variável (array)(objeto) que contém todos os dados da tabela, se é assim que ela funciona.
Outra possibilidade seria usar o:
https://datatables.net/


(Ailime Rodrigues) #5

Ola tudo bem? Tentei usar essa outra datatables mas achei muito confuso para mexer no layout dela, para se adequar ao padro do meu.
Já pesquisei por tudo mas não achei solução pra esse problema. Não sei como pesquisar por todos dados da tabela. :frowning:


(Luan Maik) #6

Qual a versão do plugin que você está utilizando?


(Ailime Rodrigues) #7

estou usando a versão 2.0


(Luan Maik) #8

Encontrei um link que é do jeito que procura:
http://sellingtweets.com/4/

Código:

$(function() {

	var $table = $('table').tablesorter({
		theme: 'blue',
		widgets: ["zebra", "filter"],
		widgetOptions : {
			// filter_anyMatch replaced! Instead use the filter_external option
			// Set to use a jQuery selector (or jQuery object) pointing to the
			// external filter (column specific or any match)
			filter_external : '.search',
			// add a default type search to the first name column
			filter_defaultFilter: { 1 : '~{query}' },
			// include column filters
			filter_columnFilters: true,
			filter_placeholder: { search : 'Search...' },
			filter_saveFilters : true,
			filter_reset: '.reset'
		}
	});

});

Veja se consegue implementar no seu código.

a parte:
filter_external : '.search',
faz referência à classe do input text que vai receber o termo de busca.


(Ailime Rodrigues) #9

Não é bem isso.. Nesse exemplo não tem paginação. Tentei adaptar mas ainda segue pesquisando somente na página atual. :sob:


(Luan Maik) #10

Como é feito a paginação? vc lista TODOS os registro e DEFINE a quantidade de registros por página ou ao clicar na próxima página ele faz uma REQUISIÇÃO ao banco de dados buscando novos dados?

Porque do jeito que está fazendo não dará certo, pois está buscando na estrutura da tabela(html), o correto é buscar nos dados armazenados no plugin.


(Ailime Rodrigues) #11

Mas a paginação é feita pelo próprio plugin. Lista todos de uma vez e define quantos aparecem por página.

Este arquivo: jquery.tablesorter.pager.js


(Luan Maik) #12

tenta isso:

https://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html

Em resumo:

//input para busca
<input class="search selectable" type="search" placeholder="Search" data-column="all">


// Instancia o tablesorter adicionando em uma variável
var $table = $('table').tablesorter({
    ...
});


//adiciona um parâmetro ao plugin passando o $table criado acima e o selector do input de busca
$.tablesorter.filter.bindSearch( $table, $('.search') );

Na documentação não possui um exemplo com este filtro junto à paginação.


(Luan Maik) #13

https://mottie.github.io/tablesorter/docs/example-widget-filter-any-match.html


(Ailime Rodrigues) #14

continuo na mesma. achei este exemplo mas não consegui adaptar, a paginação funciona mas a busca não.

https://mottie.github.io/tablesorter/docs/example-pager-filtered.html


(Ailime Rodrigues) #15

bueno. abandonei. estou usando agora o datatable, como vc falou anteriormente. Mais fácil de lidar. Obrigada.


(Luan Maik) #16

Encontrei sem querer este outro plugin para fazer tabelas dinâmicas e sem muito código:
http://www.jquery-bootgrid.com/Examples

Acredito ser o melhor plugin dentre as opções levantadas neste tópico.