JavaScript filter/search in table

Re: JavaScript filter/search in table

JOSE — 2012-01-11 03:03:09+0100

Re: JavaScript filter/search in table

JOSE — 2012-01-11 02:51:50+0100

-1

Re: JavaScript filter search in table

echarp — 2011-03-14 15:42:49+0100

I’m not using it currently, but your changes are appreciated, and could be useful to others.

Thanks!

Re: JavaScript filter search in table

Austin — 2011-03-14 15:01:48+0100

I have no idea how old this is or if it is even still worked on, but i had to make some small modifications to get it working in Chrome/Firefox, so i will just add them here incase anyone else needs them.

JavaScript Change:

CHANGE
function filterTable(term, table) { dehighlight(table);

TO
function filterTable(term, table) { var term = document.getElementById(term); var table = document.getElementById(table); dehighlight(table);

HTML Change

CHANGE
filterTable(this.value, ‘filterTable’);

TO
filterTable(‘searchClient’, ‘filterTable’);

In the function, “searchCLient” is the ID only of the textbox, “filterTable” is the ID only of the table. The 2 lines i added in the JavaScript file turn the ID into an object.

Re: JavaScript filter search in table

Artur — 2011-02-25 23:24:45+0100

could i get the naked html file too? i have problem too with aplaying it

Re: JavaScript filter search in table

2010-12-09 13:56:23+0100

Re: Can't have 2 different tables on the same page

adrian — 2010-11-25 10:09:56+0100

I think would be a good solution:
input.onkeyup = (function(i) { return function() { filterTable(’filter_’+i, tables[i]); } })(i);

Re: Can't have 2 different tables on the same page

echarp — 2010-08-28 20:08:49+0200

Super!

+1 Thanks for the modifications.

Re: Can't have 2 different tables on the same page

2010-08-28 18:54:49+0200

Hi Echarp. Thanks for the answer but after a bit of experimenting I found out that i needed to specify somehow the table to which the textfield applies. Also, I had to do it so that it passes the ID to the filterTable() function. Basically I’m assigning an ID to the table (if it’s not already defined, othewise I’m using that one). Also, since a table might already have a class of it’s own I’ve modified the code so that is looks for the “filterable” substring. I was already using “sortable resizable” as a class value. Last thing, the Array#contains method that I’m using is an extension for the Prototype lib.

Here’s the refactored code. I put all of it in a function:

function initFilterableTables() { tables = document.getElementsByTagName(‘table’);

for (var t = 0; t < tables.length; t++) { element = tables[t]; if (!element.attributes[‘id’]) { element.setAttribute(“id”, “auto-table-id-” + t) } if (element.attributes[‘class’] && element.attributes[‘class’].value.split(" ").contains(‘filterable’)) { var form = document.createElement(‘form’); form.setAttribute(‘class’, ‘filter’); form.setAttribute(‘id’, ‘filter’); var input = document.createElement(‘input’); input.setAttribute(‘type’, ‘text’); input.style.height = “2em”; input.setAttribute(‘class’, ‘searchtextbox’); input.setAttribute(‘id’, ‘searchtextbox’ + t); input.setAttribute(‘onkeyup’, ‘filterTable("’ + input.attributes[‘id’].value + ‘“,”’ + element.attributes[‘id’].value + ‘“)’) form.appendChild(input); element.parentNode.insertBefore(form, element); } }

}

Re: Can't have 2 different tables on the same page

echarp — 2010-08-28 13:33:00+0200

Yes.

I’m testing it right now, and it only applies to the latest table. This is due to event management and knowing onto which input element the event is associated.

Are you following this thread? If yes, you could try simply using the javascript event, assigning a new attribute to the input, something like “tableNumber”, which you can use in the “filterTable” function in order to apply on the correct table. I’ll try something this afternoon, and paste here the resulting js…