6
को टेक्स्ट खोज, चेकबॉक्स और चयन के साथ तालिका के बाहर से एक तालिका फ़िल्टर करने की आवश्यकता है। JQuery के लिए PicNet Table Filter दोनों तालिकाओं के बाहर चेकबॉक्स का उपयोग और उपयोग दोनों के लिए काम करता है ... हालांकि मुझे काम करने के लिए एक चुनिंदा बॉक्स कैसे प्राप्त करें के बारे में कोई उदाहरण नहीं मिल रहा है। किसी को पता है?टेक्स्ट, चेकबॉक्स के साथ jQuery तालिका फ़िल्टर,
** मैं यहाँ भी विशिष्ट हो रही हो सकता है, लेकिन सोचा था कि मैं कम से कम में पूछताछ होगी। *
मैं भी PicNet के अलावा अन्य संभावनाओं के लिए खुला रहा हूँ।
अद्यतन: यहां मेरा कोड है, मैं दो हां/नहीं चेकबॉक्स द्वारा शरीर के शीर्ष पर एक विकल्प चुनना चाहता हूं।
<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। –