views:

396

answers:

3

Need to filter a table from outside of the table, with a text search, checkboxes, and selects. PicNet Table Filter for jQuery works for both searching and using checkboxes outside of the table... though I can't find any examples of how to get a select box to work. Anyone know?

*I might be getting too specific here, but thought I'd at least inquire.

I'm also open to possibilities other than PicNet.

UPDATED: Here's my code so far, I'd like an option select at the top of the body by the two yes/no checkboxes.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>PicNet Table Filter Demo</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>                
<script type="text/javascript" src="picnet.table.filter.min.js"></script>   


<script type="text/javascript">
    $(document).ready(function() {
        //  Randomly Create Data Rows


        // Initialise Plugin
        var options1 = {
            additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#itemone'), $('#quickfind')],
            clearFiltersControls: [$('#cleanfilters')],
            matchingRow: function(state, tr, textTokens) {
                if (!state || !state.id) { return true; }                   
                var val =  tr.children('td:eq(2)').text();
                var val2 =  tr.children('td:eq(3)').text();
                switch (state.id) {
                    case 'onlyyes': return state.value !== 'true' || val === 'yes';
                    case 'onlyno': return state.value !== 'true' || val === 'no';
                    case 'itemone': return state.value !== 'true' || val2 === 'Item 1';
                    default: return true;
                }
            }
        };

        $('#demotable1').tableFilter(options1);


    });
</script>
<style>
* { font-family:arial;  font-size:8pt;}
table, td, th { border: solid 1px silver; color:#666; padding:3px 5px 3px 5px}
th { background-color:#333; color:#fff; font-size:0.85em }
a { color:gray; }
.filtering { background-color:light-gray}
#jqtf_filters {
list-style:none;

}
 #jqtf_filters li {
display:inline-block; 
position:relative; 
float:left;
margin-bottom:20px
  }
  .hidden, tr.filters { display: none;}

  </style>
  </head>
  <body>    
<b>Additional Filters for Table 1</b><br/>
     Only Show Yes: <input type="checkbox" id="onlyyes"/>           
Only Show No: <input type="checkbox" id="onlyno"/>
Only Show Item 1: <input type="checkbox" id="itemone"/>
<br/>    
Quick Find: <input type="text" id="quickfind"/>
<br/>
<a id="cleanfilters" href="#">Clear Filters</a>
<br/><b>Table 1</b><br/>
    <table id='demotable1'>
    <thead>
        <tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th><th class="hidden" filter='false'></th></tr>
        </thead>
        <tbody>
        <tr>
            <td>Value 102</td>
            <td>420</td>
            <td>yes</td>
            <td>Item 1</td>
            <td>hello</td>
            <td>01/11//2009</td>                
            <td></td>
            <td class="hidden">Ed Head</td>
        </tr>
        <tr>
            <td>Value 134</td>
            <td>987</td>
            <td>no</td>
            <td>Item 2</td>
            <td>hi</td>
            <td>03/11//2009</td>                
            <td></td>
            <td class="hidden">Joe Blow</td>
        </tr>
        <tr>
            <td>Value 654</td>
            <td>722</td>
            <td>yes</td>
            <td>Item 3</td>
            <td>hello</td>
            <td>04/11//2009</td>                
            <td></td>
            <td class="hidden">Jimmy</td>
        </tr>
    </tbody>
    </table>

    </body>
    </html>
A: 

I have no idea what you're trying to do ("Need to filter a table from outside of the table" - wtf does that mean?). But if you're trying to get the value of a select box using jQuery:

$('#yourSelectList').val() // Option value
$('#yourSelectList :selected').text() // Option text value
Jason
If you look at the PicNet table filter plugin they have two options, filtering from within the table and from outside of it. I'm trying to filter a column using an option select, outside of the table.
Jeffrey
A: 

Just made a small example for you to try out. Just a quick proof of concept.

<select id="filter">
  <option value="dogs">dogs</option>
  <option value="cats">cats</option>
</select>

<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
</tr>
    <tr>
<td>cats</td>
</tr>
    <tr>
<td>cats</td>
</tr>
    <tr>
<td>dogs</td>
</tr>
</table>

And the jQuery:

$("#filter").change(function(){
    $("#boing").find("td").each(function(){
        if($(this).text() != $("#filter").val()) $(this).hide();
        else $(this).show();
    });
});​

If you want to hide/show the whole row, do $(this).parent().hide() and $(this).parent().show()

One thing to keep in mind is that if you want to do a dropdown that checks all TD's in each row, you will have to tweak the code so that it will only hide the row if NONE of the tds match the dropdown. Something like this.

<select id="filter">
  <option value="dogs">dogs</option>
  <option value="cats">cats</option>
</select>

<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
<td>cats</td>
</tr>
    <tr>
<td>cats</td>
<td>dogs</td>
</tr>
    <tr>
<td>cats</td>
<td>cats</td>
</tr>
    <tr>
<td>dogs</td>
<td>cats</td>
</tr>
</table>

And the jQuery:

$("#filter").change(function(){
    $("#boing").children('tbody').children('tr').not(':first').each(function(){
        var match = false;
        $(this).children('td').each(function() {
            if($(this).text() == $("#filter").val()) match = true;
        });
        if(match) $(this).show();
        else $(this).hide();
    });
});​
Bradley Mountford
how can I hide an entire row? http://jsfiddle.net/B7hMk/
Jeffrey
+2  A: 

what about use the wonderful Datatables plugins for Jquery ?

http://datatables.net/

Rbacarin
Suggestions like this is why I ask. Grazie!
Jeffrey
As Napoleon says: "Dividing to conquer" \o/
Rbacarin
Nice plugin! +1
Bradley Mountford