DataTablesで絞り込みを行いたい。

###DataTablesに対してプルダウン、チェックボックスで絞り込みを行いたい。
EX TABLE FILTER使えよって話ですが、表題通り、
DataTablesのテーブルに対して、プルダウンやチェックボックスで絞り込みを行いたいです。

既存の表示件数プルダウンやキーワード検索フォームの上部に、プルダウンとチェックボックスを設置しようと考えてます。
下記表で列「値段」「割引」をプルダウンで、
列「色」「大きさ」をチェックボックスで絞り込みできるようにしたいです。
（プルダウン2つ、チェックボックス2つ配置）

HTMLは触れたことがありますがjavascriptは初めてなのでつまずいてしましました。
上記要件を満たすにはどう記述したらよいでしょうか。
よろしくお願いします。
※リアルタイム反映でも「絞り込み」ボタン設置でもどちらでも可※
###ソースコード

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
	<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
	<script type="text/javascript">
		jQuery(function($){ 
			// デフォルトの設定を変更
			$.extend( $.fn.dataTable.defaults, { 
				language: {
					url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
				} 
			}); 

			$("#foo-table").DataTable({
				lengthMenu: [ 25, 50, 100 ],
				displayLength: 25,
				scrollX: true,
				scrollY: 200
			});	
		}); 
	</script>
	<title></title>
</head>
<body>
	<table id="foo-table" class="table table-bordered">
	<thead>
		<tr><td>番号</td><td>色</td><td>商品</td><td>大きさ</td><td>値段</td><td>割引</td></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>青</td><td>自動車A</td><td>大</td><td>1000000</td><td>不可</td></tr>
		<tr><td>2</td><td>青</td><td>自転車A</td><td>中</td><td>10000</td><td>可</td></tr>
		<tr><td>3</td><td>青</td><td>ノートパソコンA</td><td>小</td><td>100000</td><td>可</td></tr>
		<tr><td>4</td><td>黄</td><td>自動車B</td><td>大</td><td>2000000</td><td>不可</td></tr>
		<tr><td>5</td><td>黄</td><td>自転車B</td><td>中</td><td>20000</td><td>可</td></tr>
		<tr><td>6</td><td>黄</td><td>ノートパソコンB</td><td>小</td><td>200000</td><td>可</td></tr>
		<tr><td>7</td><td>赤</td><td>自動車C</td><td>大</td><td>3000000</td><td>不可</td></tr>
		<tr><td>8</td><td>赤</td><td>自転車C</td><td>中</td><td>30000</td><td>可</td></tr>
		<tr><td>9</td><td>赤</td><td>ノートパソコンC</td><td>小</td><td>300000</td><td>可</td></tr>
	</tbody>
</table>
</body>
</html>

行動規範の内容に同意します

回答1件

HTML
1<form action="#">
2<div>
3<label>値段<select name="price"><option value="0">-</option><option value="100000">100000-</option></select></label>
4<label>割引<select name="disc"><option value="">-</option><option>可</option><option>不可</option></select></label>
5<label><input type="checkbox" name="color" />青</label>
6<label><input type="checkbox" name="size" />大</label>
7</div>
8</form>

JavaScript
1$.fn.dataTable.ext.search.push(
2    function( settings, data, dataIndex ) {
3        var form = document.forms[0];
4        var color = form.elements['color'].checked;
5        var size = form.elements['size'].checked;
6        var price = parseFloat(form.elements['price'].value);
7        var disc = form.elements['disc'].value;
8        if (color && data[1] !== '青') {
9            return false;
10        }
11
12        if (size && data[3] !== '大') {
13            return false;
14        }
15
16        if (parseFloat(data[4]) < price) {
17            return false;
18        }
19
20        if (disc !== '' && data[5] !== disc) {
21            return false;
22        }
23
24        return true;
25    }
26);
27
28var table = $("#foo-table").DataTable({
29    lengthMenu: [ 25, 50, 100 ],
30    displayLength: 25,
31    scrollX: true,
32    scrollY: 200
33});
34
35$('form').on('change', function(event) {
36    table.draw();
37});