473,326 Members | 2,124 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,326 developers and data experts.

Table with filtering to the content

Greetings again everyone
Recently i´ve been asked to develop a script to allow filtering in the content of the table, with dinamic options based on the own content. Example: a table with the name of some students and their respective numbers, and then you wanna show only studentes called "Joao", or students with number "5", or even only students called "joao" with number "5".

The structure we are going to use is a basic html table, like:

Expand|Select|Wrap|Line Numbers
  1. <table>
  2.  <thead>
  3.   <tr>
  4.    <th>Header</th>
  5.   </tr>
  6.  </thead>
  7.  <tbody>
  8.   <tr>
  9.    <td>Content</td>
  10.   </tr>
  11.  </tbody>
  12. </table>
  13.  
And here comes the css/js, and after that a simple sample.

JS: filter:js
Expand|Select|Wrap|Line Numbers
  1. ///////////////////////////////////////////////
  2. // Created by: Romulo do Nascimento Ferreira //
  3. // Email: romulo.nf@gmail.com                //
  4. ///////////////////////////////////////////////
  5. //
  6. // Parameters
  7. // tableID = id of the table to allow the filtering
  8. // numRows = max number of rows to show (more will create a scrollbar)
  9. //
  10.  
  11. function createFilter(tableID,numRows) {
  12. this.table = document.getElementById(tableID)
  13. this.table.className = "filter"
  14. this.header = this.table.tHead
  15. this.mainBody = this.table.tBodies[0]
  16. this.numCol = this.header.rows[0].cells.length
  17. this.maxRows = numRows
  18. this.selectArray = new Array(this.numCol)
  19. this.optionArray = new Array(this.numCol)
  20.  
  21. // create an extra tr beneath the header
  22. this.newTr = document.createElement("tr")
  23. this.header.appendChild(this.newTr)
  24.  
  25.     for (x=0; x<this.numCol; x++) {
  26.     // loop to create the th's
  27.     tempTh = document.createElement("th")
  28.     this.newTr.appendChild(tempTh)
  29.  
  30.     // create one select box to each th
  31.     tempSelect = document.createElement("select")
  32.     tempSelect.style.width = this.header.rows[0].cells[x].offsetWidth - 10 + "px"
  33.     tempSelect.ativado = false
  34.     tempSelect.filtro = this
  35.     tempSelect.onchange = function() { this.filtro.applyFilter(this) }
  36.     this.selectArray[x] = tempSelect
  37.     tempTh.appendChild(tempSelect)
  38.     }
  39.  
  40.     for (x=0; x<this.header.rows.length; x++) {
  41.     // create an extra th to allow the scrolling
  42.     tempTh = document.createElement("th")
  43.     tempTh.className = "scrollBar"
  44.     this.header.rows[x].appendChild(tempTh)
  45.     }
  46.  
  47.     // change the table normal structure to allow the scroll
  48.     tempTr = document.createElement("tr")
  49.     tempTd = document.createElement("td")
  50.     divHolder = document.createElement("div")
  51.     tempTable = document.createElement("table")
  52.     this.newBody = document.createElement("tbody")
  53.  
  54.     for (x=this.mainBody.rows.length-1; x>=0; x--) {
  55.     this.newBody.appendChild(this.mainBody.rows[x])
  56.     }
  57.  
  58.     tempTd.colSpan = this.numCol + 1
  59.     divHolder.className = "holder"
  60.  
  61.     this.mainBody.appendChild(tempTr)
  62.     tempTr.appendChild(tempTd)
  63.     tempTd.appendChild(divHolder)
  64.     divHolder.appendChild(tempTable)
  65.     tempTable.appendChild(this.newBody)
  66.     divHolder.style.height = numRows * this.newBody.rows[0].cells[0].offsetHeight + "px"
  67.  
  68.     this.populateFilters()
  69. }
  70.  
  71. createFilter.prototype.populateFilters = function() {
  72.  
  73.     for (x=0; x<this.numCol; x++) {
  74.  
  75.     tempOptionArray = new Array()
  76.     count = 0
  77.  
  78.     // clear all the options from the selects
  79.         if (this.selectArray[x].options.length > 0) {
  80.             for (y=this.selectArray[x].options.length-1; y>=0; y--) {
  81.             this.selectArray[x].remove(y)
  82.             }
  83.         }
  84.  
  85.         // search through all visible rows and populate an array with all the possibilities
  86.         for (y=0; y<this.newBody.rows.length; y++) {
  87.             if (this.newBody.rows[y].style.display !="none") {
  88.             tempOptionArray[count] = this.newBody.rows[y].cells[x].innerHTML
  89.             count = count + 1
  90.             }
  91.         }
  92.  
  93.         // sort this array
  94.         tempOptionArray.sort()
  95.  
  96.         // remove all repeated entries
  97.         for (y=tempOptionArray.length-1; y>=1; y--) {
  98.             if (tempOptionArray[y] == tempOptionArray[y-1]) {
  99.             tempOptionArray.splice(y,1)
  100.             }
  101.         }
  102.  
  103.         // create a blank option to remove the filter
  104.         blankOption = document.createElement("option")
  105.         blankOption.innerHTML = ""
  106.         blankOption.value = ""
  107.         this.selectArray[x].appendChild(blankOption)
  108.  
  109.         // loop the array and populate the select box
  110.         for (y=0; y<tempOptionArray.length; y++) {
  111.         newOption = document.createElement("option")
  112.         newOption.innerHTML = tempOptionArray[y]
  113.         newOption.value = tempOptionArray[y]
  114.         this.selectArray[x].appendChild(newOption)
  115.             if (this.selectArray[x].ativado) {
  116.             this.selectArray[x].options[1].selected = "selected"                
  117.             }
  118.         }
  119.     }
  120.  
  121.     this.zebraRows()
  122. }
  123.  
  124. createFilter.prototype.applyFilter = function(filtro) {
  125. cellIndex = filtro.parentNode.cellIndex
  126. appliedFilter = filtro.value
  127.  
  128. appliedFilter != "" ? filtro.ativado = true : filtro.ativado = false
  129.  
  130.     // loop all rows and compare the innerHTML from the tds with the filter
  131.     // hide the tds that dont match the filter
  132.     for (x=0; x<this.newBody.rows.length; x++) {
  133.         this.newBody.rows[x].flag = false
  134.         for (y=0; y<this.numCol; y++) {
  135.             if (this.newBody.rows[x].cells[y].innerHTML != this.selectArray[y].value && this.selectArray[y].value !="") {
  136.             this.newBody.rows[x].flag = true
  137.             }
  138.         }
  139.         this.newBody.rows[x].flag ? this.newBody.rows[x].style.display = "none" : this.newBody.rows[x].style.display = ""
  140.     }
  141.  
  142.     this.populateFilters()
  143. }
  144.  
  145. createFilter.prototype.zebraRows = function() {
  146. this.nextClass = "odd"
  147.  
  148.     for (x=0; x<this.newBody.rows.length; x++) {
  149.         if (this.newBody.rows[x].style.display != "none") {
  150.         this.newBody.rows[x].className = this.nextClass
  151.         this.nextClass == "odd" ? this.nextClass = "even" : this.nextClass = "odd"
  152.         }
  153.     }
  154. }
  155.  
CSS: filter.css
Expand|Select|Wrap|Line Numbers
  1. .filter {border-collapse:collapse; table-layout:fixed; width:500px}
  2. .filter th {text-align:center; background:#eee; border:1px dotted #777; font:bold 11px verdana; line-height:16px; padding:1px}
  3. .filter td {text-indent:5px; overflow:hidden; white-space:nowrap; font:normal 11px verdana}
  4. .filter th select {overflow:hidden; font:normal 11px verdana}
  5.  
  6. .even td {background:#fff}
  7. .odd td {background:#eee}
  8.  
  9. .filter table {width:480px; table-layout:fixed; border-collapse:collapse}
  10. .filter .holder {width:499px; overflow:auto;}
  11. .filter .scrollBar {border:0; background:transparent; width:13px;}
  12. * html .filter .scrollBar {width:16px}
  13.  
Sample: filter.html
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5. <title>Filter</title>
  6. </head>
  7.  
  8. <script src="filter.js"></script>
  9. <link rel="stylesheet" href="filter.css" type="text/css">
  10.  
  11. <script>
  12. window.onload = function() {
  13. new createFilter("tabelaUm",10)
  14. }
  15. </script>
  16.  
  17. <body>
  18.  
  19. <h2>Filter</h2>
  20.  
  21. <script>
  22.  
  23. arrayNomes = ['Ricardo','Paulo','Maria','Joana','Rita','Fabiano']
  24. arrayNumeros = ['1','2','3','4','5','6','7','8','9']
  25. arrayTipo = ['Excellent','OK','Bad']
  26.  
  27. tabela = document.createElement("table")
  28. tabela.id = "tabelaUm"
  29.  
  30. thead = document.createElement("thead")
  31. tabela.appendChild(thead)
  32.  
  33. tr = document.createElement("tr")
  34.  
  35.     for (x=0; x<4; x++) {
  36.     th = document.createElement("th")
  37.     th.innerHTML = "Header " + (x+1)
  38.     tr.appendChild(th)
  39.     }
  40.  
  41. thead.appendChild(tr)
  42.  
  43. tbody = document.createElement("tbody")
  44.  
  45.     for (x=0; x<250; x++) {
  46.     tr = document.createElement("tr")
  47.  
  48.         td = document.createElement("td")
  49.         td.innerHTML = arrayNomes[Math.floor(Math.random()*6)]
  50.         tr.appendChild(td)
  51.  
  52.         td = document.createElement("td")
  53.         td.innerHTML = arrayNumeros[Math.floor(Math.random()*9)]
  54.         tr.appendChild(td)
  55.  
  56.         td = document.createElement("td")
  57.         td.innerHTML = arrayNumeros[Math.floor(Math.random()*9)]
  58.         tr.appendChild(td)
  59.  
  60.         td = document.createElement("td")
  61.         td.innerHTML = arrayTipo[Math.floor(Math.random()*3)]
  62.         tr.appendChild(td)        
  63.  
  64.     tbody.appendChild(tr)
  65.     }
  66.  
  67. tabela.appendChild(tbody)
  68. document.getElementsByTagName("body")[0].appendChild(tabela)
  69.  
  70. </script>
  71.  
  72. </body>
  73. </html>
  74.  
Thats basically it. Feel free to use the script anywhere.
If you find something needing some fix, send me an email.

Good luck!
Nov 1 '07 #1
0 6064

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Vector | last post by:
I have this working fine in Access and MSSQL. While trying to convert to MySQL the result is not what I'm looking for to get.. Two tables: T1 ---------------- ID1|cName |...
3
by: serge calderara | last post by:
Dear all, I have a csv file data which has been read and populate on a dataset object. then I need to bind part of the content of the dataset to a treeview control. I have read that XML format...
2
by: Seth | last post by:
How can I hide an entire row of a table if one of the cells in that row is equal to a value drop down box value. My goal is to have a filtered table so that each cell in each row determines if...
17
by: Matt Kruse | last post by:
I'm looking for the best JS/CSS solution to add functionality to tables. The only browser which needs to be supported is IE5.5+, but no activeX can be used. to be able to do: - Fixed header row...
3
by: Joachim Klassen | last post by:
Hi all, first apologies if this question looks the same as another one I recently posted - its a different thing but for the same szenario:-). We are having performance problems when...
2
by: Konrad | last post by:
Hi Can you point examples in .NET of filtering (avoiding) displaying web pages with unwanted content on machine with ie? Thanks Konrad
1
by: hackerslacker | last post by:
I have an ordering form that use two combo boxes to filter down the records of a Products table. This worked fine with the after_Update of the first filtering the records and creating the...
8
by: rshivaraman | last post by:
Hi : I have a TableA with around 10 columns with varchar and numeric datatypes It has 500 million records and its size is 999999999 KB. i believe it is kb i got this data after running...
9
by: shanevanle | last post by:
I have two tables that are pretty big. I need about 10 rows in the left table and the right table is filtered to 5 rows as well. It seems when I join the tables in the FROM clause, I have to...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.