Identity
Filter
Visitors
(1) (1) (1) (1) (2) (1) (1) (4) (1) (0) (1) (1) (0) (0) (0) (0) (1) (0) (0) (0)Subscribers
(1)
Highest posts
Latest posts
Links
Highest posts
Latest posts
Hi Echarp,
I just started using this code but i found a small problem. Apparently I can’t have 2 filterable tables on the same page each one with it’s own textfield. If I create 2 I get the first table that is doing nothing, and only the last one works.
I’ve tried doing a bit of debuging and it seams that the first textfield (for the first table) is attempting to search in the last table, even if visually it does nothing.
I’m pretty noob when it comes to js, can you give me a hand please?
+1
New discussion
Answer
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…
+1
New discussion
Answer
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); } }}
+1
New discussion
Answer
+1