jQuery table filter with text, checkboxes, selects

问题

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>

回答1:

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();
    });
});

回答2:

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

来源：https://stackoverflow.com/questions/2875806/jquery-table-filter-with-text-checkboxes-selects

标签

jquery

filter

html-table

tablefilter