代码拉取完成，页面将自动刷新
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>DataTables (table plug-in for jQuery) Column Filter Add-on</title>
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<style type="text/css" media="screen">
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "http://www.datatables.net/media/css/site_jui.ccss";
@import "media/css/demo_table_jui.css";
@import "media/css/themes/base/jquery-ui.css";
@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
/*
* Override styles needed due to the mix of three different CSS sources! For proper examples
* please see the themes example in the 'Examples' section of this site
*/
.dataTables_info { padding-top: 0; }
.dataTables_paginate { padding-top: 0; }
.css_right { float: right; }
tfoot th input { width: 90% }
#example_wrapper .fg-toolbar { font-size: 0.8em }
#theme_links span { float: left; padding: 2px 10px; }
</style>
<script type="text/javascript" src="media/js/complete.js"></script>
<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="media/js/jquery.dataTables.columnFilter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example').dataTable({
bJQueryUI: true,
"sPaginationType": "full_numbers"
})
.columnFilter({
aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] },
{ type: "text" },
null,
{ type: "number" },
{ type: "select", values: [ 'A', 'C', 'U', 'X'] }
]
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17838786-4']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body id="index" class="grid_2_3">
<div id="fw_container">
<div id="fw_header">
<h1>
<img src="media/images/DataTables.jpg" alt="DataTables logo">
DataTables Column Filter Add-on
</h1>
<ul>
<li><a href="http://code.google.com/p/jquery-datatables-column-filter/">Project Home</a></li>
<li><a href="default.html">Examples</a></li>
<li><a href="http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter">Documentation</a></li>
<li><a href="http://code.google.com/p/jquery-datatables-column-filter/issues/list">Issues/Changes</a></li>
<li><a href="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js" target="_blank">DataTables Column Filter Add-on</a></li>
</ul>
<div class="css_clear"></div>
</div>
<div id="fw_content">
<div class="grid_column_1">
<p><a href="http://www.datatables.net/">JQuery DataTables</a> is a plug-in for the <a href="http://www.jquery.com/">jQuery</a> Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. DataTables Column Filter plugin is an add-on for the DataTables where is provided out of box individual column filtering code. Key features:</p>
<ul class="limit_length">
<li>Individual column filtering</li>
<li>Customizable place of the column filter (footer, header)</li>
<li>
Various types of filters
<ul>
<li>Text filters</li>
<li>Number filters</li>
<li>List filters</li>
<li>Date range filters</li>
<li>Number range filters</li>
<li>Form filters</li>
</ul>
</li>
<li>It's free!</li>
<li>Full integration with the DataTables 1.9 plugin</li>
<li>Requires JQuery 1.6+</li>
</ul>
</div>
<div class="grid_column_2">
<p>So how easy it is to use apply column filters on the DataTables? Take a peek at the code below, a single function call to initialise the table is all it takes:</p>
<pre class="brush: js; font-size: 75%">/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable()
.columnFilter();
});</pre>
</div>
<div class="css_clear css_spacing"></div>
<h3>Example</h3>
<div class="full_width">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width:980px">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Google Chrome 1.0</td>
<td>Win XP+</td>
<td class="center">525</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="css_clear"></div>
<div class="css_spacing"></div>
<!--
<div class="grid_column_1r">
<h3>Used by</h3>
<div class="column_1_3 news_link css_center"><a href="http://openlibrary.org/"><img src="/media/images/used_by/open_library.png"></a></div><div class="column_1_3 news_link css_center"><a href="http://www.st-andrews.ac.uk/"><img src="/media/images/used_by/stAndrews.png"></a></div><div class="column_1_3 news_link css_center"><a href="http://usatoday.com"><img src="/media/images/used_by/usatoday.png"></a></div> <p class="css_center css_small" style="padding-top: 20px">
Are you using DataTables as well?<br>Please <a href="/contact">get in touch</a>!
</p>
</div>
<div class="grid_column_2r">
<h3>DataTables around the web</h3>
<div class="column_1_3 news_link"> <a href="http://julien.maupetit.alwaysdata.net/Blog/2011/05/05/serving-csv-data-cgi-mode-populate-jquery-datatabl/
">Server-side processing with CSV source</a><br> Julien Maupetit shows us how to use Python to consume CSV data to perform server-side processing for DataTables.</div><div class="column_1_3r news_link"> <a href="https://github.com/cyberhobo/ColumnFilterWidgets
">Column filtering widgets</a><br> This is a very cool extra for DataTables which provides advanced filtering options for your tables, adding a drop down for each column, with cascading selection options.</div><div class="column_1_3 news_link"> <a href="http://www.codeproject.com/KB/java/JQuery-DataTables-Java.aspx
">Server-side processing and Java</a><br> Jovan Popovic turns his hand this time to showing us how server-side processing for DataTables can be implemented in Java, in this thorough tutorial.</div><div class="column_1_3r news_link"> <a href="http://www.codeproject.com/KB/aspnet/Expandabe-DataTable-MVC.aspx
">Details view with ASP.NET MVC</a><br> Jovan Popovic continues his excellent series of articles about DataTables, this time showing how to integrate fnOpen with an Ajax request to an ASP.NET MVC backend to show details about a row.</div><div class="column_1_3 news_link"> <a href="https://github.com/IgnitedDatatables/Ignited-Datatables/
">Ignited-Datatables</a><br> Work has been continuing at a fine pace with Ignited-Datatables - a server-side processing backend for CodeIgniter. Now with support for joins.</div> <div class="column_1_3r news_link css_center">
<p><a href="news.php">More...</a></p>
<p class="css_small">Please <a href="/contact">let me know</a> if you have any DataTables related news, which I can add here!</p>
<p>
<a href="/rss_news.xml"><img src="/media/images/rss.png"> DataTables news feed</a><br>
<a href="/rss.xml"><img src="/media/images/rss.png"> DataTables releases feed</a>
</p>
</div>
<div class="css_clear"></div>
</div>
-->
<div class="css_clear"></div>
<div id="fw_footer">
<div class="css_center">
DataTables Column Filter Add-on created by Jovan Popovic © 2011<br>
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> © 2007-2011<br>
</div>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手