multi column search in a table using jquery (Algorithm needed)?

Question

I need to write a multi column search in a table. Due to some reason (support issue), I am unable to use datatable and table sorter plugin. I need your help in algorithmic part that how can I make multi column search. Please do not give me the link of already created plugins since I have changed table structure too much and I am unable to use those. I need something like this

datatables.net/examples/api/multi_filter.html

if I will get the hint for how its algo works, I will write the same function for me. I have written this code, but it is working on single column search, when I am searching in another column, it resets the search in multi column.

function searchonKeyPress(input_text_box)
{

  var query =   $.trim(input_text_box.val());
  query = query.replace(/ /gi, '|');
  if(query=='undefined')
  return false;
  var index_input = input_text_box.closest("th").index();
  index = $("#freeze-tableFreeze .GridviewScrollItem tr:eq("+index_input+") td").length;    
  $("#freeze-tableFreeze .GridviewScrollItem").each(function() {
  var tr_ident = $(this).attr('tr_ident');  
  var column_text = $(".GridviewScrollItem[tr_ident='"+tr_ident+"'] td:eq("+index_input+")").text();
  (column_text.search(new RegExp(query, "i")) < 0) ?        $(this).hide().removeClass('visible') : $(this).show().addClass('visible');

  });
  pagignation(1);
}

I need something like this:

enter image description here

stevanity: I want to do column search on html table like datatables.net/examples/api/multi_filter.html — Avinash Dubey
– Avinash Dubey, Commented Sep 24, 2013 at 11:41

Charaf JRA · Accepted Answer · 2013-09-24 13:43:58Z

2

Try this if you want to search in all the table: DEMO

If you want to search by column try this :DEMO

HTML:

<table>
    <thead>
        <tr>
            <th>One<input type='text' class='search' /></th>
            <th>Two<input type='text' class='search' /></th>
            <th>Three<input type='text' class='search' /></th>
            <th>Four<input type='text' class='search' /></th>
        </tr>
    </thead>
    .........

JQuery:

$('.search').blur(function(){
$("td").removeClass('selected','');
var index=$(this).index('.search')+1;

    $('.search').each(function(index , val){

        var tag=$(val).val();
       if(tag!='') $("tr td:contains("+tag+")").addClass('selected');

    });

});

edited Sep 24, 2013 at 13:43

answered Sep 24, 2013 at 12:04

Charaf JRA

8,3551 gold badge36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Avinash Dubey Over a year ago

this is for search using single textbox in whole tr. I need multiple input each one for saperate td in tr.

Charaf JRA Over a year ago

this search for td , not for tr , search for hello in this example jsfiddle.net/charaf11/QwVZv

Avinash Dubey Over a year ago

but, if there will be separate textboxs for each column, then your code will not work. as in first textbox you searched for one and in second textbox you searched for two. Now row containing one and two should be displayed.

marc_s · Accepted Answer · 2017-02-13 16:45:22Z

1

The simplest solution here would be to select all td's in your table and filter them using jQuery :contains() selector with the search phrase and highlight the rows / columns.

Take a look into this simple example. This selects all the cells with keyword 'one'.

$('td:contains(one)').css('color', 'red');

Update :

New sample with search box code.

edited Feb 13, 2017 at 16:45

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 24, 2013 at 11:43

Sanjeevi Rajagopalan

2321 silver badge5 bronze badges

3 Comments

Steve Robinson Over a year ago

Yes this would probably do it. But you can also implement server side search. Especially if your table is too big it can get pretty slow.

Sanjeevi Rajagopalan Over a year ago

@stevanity True. This approach will be slow if the table data set is too large. In that case i would go with your suggestion for server side search.

Avinash Dubey Over a year ago

@stevanity, I know but we are working on something that is more important on client side.

MichaC · Accepted Answer · 2013-09-24 12:04:46Z

0

For filtering you can use JQuery and manually iterate through the html markup to show/hide certain rows dependent on the filter criteria...

I build a small example of how to achieve this. Because you didn't provide any code, you'll have to adopt it

http://jsfiddle.net/Elak/FxBhQ/

The JQuery part is not overly complex, of cause you have to extend it to what ever functionality you want to have...

$(document).ready(function () {
    $(".searchBox").change(function () {
        var search = $(this).val();
        $(".column").each(function () {

            if ($(this).text().indexOf(search)) {
                $(this).parent().hide();
            }
        });
    });
});

edited Sep 24, 2013 at 12:04

answered Sep 24, 2013 at 11:59

MichaC

13.7k2 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

multi column search in a table using jquery (Algorithm needed)?

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related