DataTables: 按列搜索的最佳实践

典型情况下，按列搜索需要满足：

1. 输入文字，在某列中搜索

2. 下拉选择，在某列中搜索

3. 输入框、下拉列表都应该放在表头，而不是表尾。

我是这样做的:

html dom这么写

把搜索那一行作为tfoot加进来

		<table   id="myTable">
					<thead>												
						<tr>							
								<th>姓名</th> 
								<th>性别</th>
								<th>创建时间</th>									 
						</tr>
					
					</thead>
					<tfoot>
						<tr>							
								<th><input type="text" class="searchField" ></th>
								<th><input type="text" class="searchField"></th>
								<th>
									<select class="searchField" >
										<option value="">不限</option>
										<option value="male">男</option>										
										<option value="female">女</option>										
									</select>									
								</th>
								<th></th>														 
						</tr>		
					</tfoot>												
		</table>

让tfoot在上面，而不是在下面

<style style="text/css">
</style>
	 tfoot {
	    display: table-header-group;
	 }

对应的javascript事件处理

监听输入框和下拉列表

<script>
	var table; 
	$( document ).ready(function() {
		
		table =	$('#myTable').DataTable({
			...



		}); 

			//column-search
	 	 table.columns().eq( 0 ).each( function ( colIdx ) {
		        $( 'input.searchField', table.column( colIdx ).footer() ).on( 'keyup change', function () {		        
		            table
		                .column( colIdx )
		                .search( this.value )
		                .draw();		            
		        } );
		        
		        $( 'select.searchField', table.column( colIdx ).footer() ).on( 'change', function () {		        
		            table
		                .column( colIdx )
		                .search( this.value )
		                .draw();
		        } );		        
		    } );
	});