www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Javascript :Table filter help required

  1. #1
    Join Date
    May 2012
    Posts
    39

    Javascript :Table filter help required

    Hi Guys,
    I have attached a js.txt file here with this post. The html in that file shows some data in table format. I need to have a filter (drop-down) above the "Status" column which will have two values :

    i) show all
    ii)only valid status

    Upon selecting "show all" it will show all the status "IN", "CO" and "-".
    But selecting "only valid status" will discard "-" and will only show "IN" and "CO".

    Please notice, I created a "Choose view filter" drop-down just above the table.
    I need exactly same drop-down above "Status" column which will work as per
    above explanation.

    Thanks.
    Attached Files Attached Files

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    have never seen such a weird markup before

  3. #3
    Join Date
    May 2012
    Posts
    39

    In reply to Javacript:table filter help

    Hi ,
    Please let me know what was weird ? I am confused .

    Thanks

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    i meant things like these:

    Code:
    <html>Choose view filter</html><html><br></html>

  5. #5
    Join Date
    May 2012
    Posts
    39

    Javascript:Table filter help

    Hi padonak,

    You may ignore that part. I hope you have understood the requirement.
    The table structure is clear I guess. I need just a filter above the "Status"
    column which is a drop-down and will work as explained before.

    I need help on the Javascript code to implement that.

    Please let me know if you have any ohter query.

    Thanks.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,102
    I didn't look at your zip file, but this is the basic idea - maybe you can adapt it...

    Code:
    <html>
    	<head>
    	</head>
    	
    	<body>
    
    <table width="75%" border="1" id="mytable">
      <tr>
        <td>Name</td>
        <td><select onchange="showRows(this.value)">
    <option value="all">show status</option>
    <option value="all">all</option>
    <option value="active">valid</option>
    </select>
    </td>
      </tr>
      <tr>
        <td>John</td>
        <td>IN</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>CO</td>
      </tr>
      <tr>
        <td>Fred</td>
        <td>-</td>
      </tr>
    </table>
    <script type="text/javascript">
    mytab=document.getElementById("mytable")
    function showRows(val){
    for (var i = 0; i < mytab.rows.length; i++) {
    if (val=="all"){
    mytab.rows[i].style.display="table-row"
    		} else {
    if (mytab.rows[i].cells[1].innerHTML=="-"){
    mytab.rows[i].style.display="none"
    }		
    		}
    	}
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    the main headache was caused by rowspans. this script acts the same to the one posted by xelawho, but it uses JQuery framework (see the linked script) and it hides and shows those rowspans.

    to get it working you must set attribute id="maintab" for the main table or it will hide and show another table's rows on the page also. it is highly recommended to fix the markup or it may work incorrectly because it's logic is based on it.

    from your code, every Command cell sibling to a cell having Status "-" has no links but just text. this was taken as a token.

    tested in: Opera, IE, FF, Chrome, Safari
    Attached Files Attached Files

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    the archive updated. there's no need to set the main table id manually, it is set automatically
    Attached Files Attached Files

  9. #9
    Join Date
    May 2012
    Posts
    39

    Javascript Table Filter

    Hi Padonak,

    Thanks for the solution. It is working perfectly.
    But the only problem it is not working in all the versions of
    firefox and internet explorer. Only on Firefox 2.0.0.13, it is
    working but not on others.

    Do I need to change anything to make it work on all any browser
    irrespective of its version ?

    Please help.

    Thanks in advance.

  10. #10
    Join Date
    May 2012
    Posts
    39

    Table filter

    Hi Padonak,

    Sorry. It was my mistake. It is working in all browsers.

    Thanks.

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    good to hear )

  12. #12
    Join Date
    May 2012
    Posts
    39

    JavaScript: Table Filter

    Hi Padonak,
    The solution you sent is working perfectly for that html, but showing some discrepancy in the filtered data for two other htmls. I am attaching the other
    two html (in ".txt", please save them in html to check) for which it is partially working.

    1. notWorking_1.txt -> There are 11 valid values for "Status" column including 'ER' and 'OK', but only 8 are coming when filtering. Because of the 'rowspan' of the cells under "Task" and "Command" columns

    2 notWorking_2.txt -> Same thing and even more interesting. When all the value of "Status" columns are "-" for a particular rowspan , then it is coming.
    But in this example one cell is having "IN" for a rowspan and that is not coming.
    Please check the "task_template_qualify_dep" row should come but it is not coming.

    Thanks.
    Attached Files Attached Files

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    ok i'll take a look at these files and let you know

  14. #14
    Join Date
    May 2012
    Posts
    39

    Table filter

    Hi Padonak,

    I consolidated the two htmls for your ease of working. I am attaching that.
    For finding the discrepancy you can focus on three consecutive cells under
    the "Task" column having value "checkRsf" , "checkRsf1" and "checkRsf2" .

    The "Status" filtering for "checkRsf" is working fine. Problem is the other two columns i.e "checkRsf1" and "checkRsf2". I hope you can easily find that for these two columns the rows having "IN" value is not coming while choosing
    "onlyValidStatus" in the drop-down above the "Status" column.

    Please find the file attached.

    Thanks a lot.
    Attached Files Attached Files

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    pls read comments in the txt-file
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles