前段时间做东西用到了Datatable，自定义搜索那里搜索了好久才做出来。
写的很笨，不过终于实现了。
作为第一篇笔记写下来(^ _ ^)

实现效果

表格呈现现效果

jquery datatable jquery datatable前端自定义查询_css


实现筛选

jquery datatable jquery datatable前端自定义查询_jquery_02

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现DataTable自定义搜索</title>
</head>
<!--第一步：引入Javascript / CSS （CDN）-->
<link rel="stylesheet" type="text/css" href="select-style.css">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<body>
	<!--第二步：添加如下 HTML 代码-->
	<div style="width: 70%;margin: 0 auto;">
		<!--下拉筛选框 需要哪些加那些就可以-->
		<div class="width-100">
			
			<span class="select-type">地区：</span>
			<select id="province_option" class="table-select"></select>
			<span class="select-type">办学类型：</span>
			<select id="internationalschool_type_option" class="table-select"></select>
			<span class="search-css">搜索：</span>
			<input id="schoolname_input" type="text" placeholder="学校名称/地区/类型" />
			
			<!--筛选按钮
			<button id="select_btn">点击筛选</button>
			-->
		</div>
		<!--表格部分-->
		<table id="table_id_example" style="text-align: center;" >
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
	<!--第三步：初始化Datatables-->
	<script>
		//指定列筛选功能的实现
		$.fn.dataTable.ext.search.push(
			function(settings,data,index,RowData,counter){
				province_data = data[2];
				type_data = data[3];
				type = $("#internationalschool_type_option option:selected").val();
				pro = $("#province_option option:selected").val();
				if((pro == '0' && type == '0')|| (province_data == pro && type == '0') || (pro == '0' && type_data == type) || (province_data == pro && type_data == type))
				{return true;}
				return false;
			}
		);
		//表格初始化
		$(document).ready( function () {
			var table = $('#table_id_example').DataTable({
				"dom": '<"toolbar">frtip',//把分页那里去除了 但是还有另外的方法也能隐藏分页，待区分用法
				"sDom":'"top"i',//利用sDom隐藏搜索栏，不会出现搜索禁用的情况 dom sDom用来修改各控件样式
				"bFilter":false,//一般没有标注searching的时候，禁用会连searching一起禁用
				"searching":true,//如果想要进行筛选，searching一定要启用，启用之后就不能禁用自带搜索框了
				"bAutoWidth":false,
				"aoColumnDefs": [{ "sWidth": "8%", "aTargets": [ 0,2,3 ] }],
				//"fnPreDrawCallback": function( oSettings ) {
				//	$('.dataTables_filter input').attr({'name':'search','placeholder': '例：北京京西学校'});//提示
				//},
				ajax: {
					url: 'isch_allrank.json',//本地json文件
					dataSrc: 'China_International_School'
				},
				columns: [ 
					{"sTitle":"排名",data:'rank'},
					{"sTitle":"学校名称",data:'name'},//,searchable:false},
					{"sTitle":"地区",data:'area'},
					{"sTitle":"类型",data:'types'}
					//前面的data是固定的表示你要获取数据中的什么属性，后面的是json数据的属性
					//表头可以在最开始固定好,也可以在这里用"sTitle"固定
				],
				//"columnDefs": [ {
				//  "targets": 1,
				//  "searchable": false
				//} ],//不知道为什么这样禁用搜索不起作用，在columns那里禁用就起作用
				
				"language": {"sProcessing": "处理中...","sLengthMenu": "显示 _MENU_ 项结果","sZeroRecords": "没有匹配结果","sInfo": "","sInfoEmpty": "显示第 0 至 0 项结果，共 0 项","sInfoFiltered": "","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "载入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首页","sPrevious": "上页","sNext": "下页","sLast": "末页"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}}//不想要就设置为空
			});
			
			点击button进行筛选
			//$('#select_btn').on('click',function() {
			//	table.draw();
			//} );
			
			//下拉框改变就进行筛选，PC端可以很好的执行，手机端不行
			$('.table-select').on('click',function() {
				table.draw();
			} );
			
			$('#schoolname_input').keyup( function() {
				schoolname = $('#schoolname_input').val();
				table.search( schoolname ).draw();
			} );//将原有搜索框隐藏，将现有搜索框的里面的值传入隐藏的原有搜索框，实现搜索框自定义
		} );
	</script>
	<!--下拉框选项js-->
	<script type="text/javascript" charset="utf8" src="table-select.js"></script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
.width-100{width:100%;text-align: right;margin-bottom:1rem;margin-top: 1rem;}
.select-type{line-height: 30px;font-size: 0.9rem;color: #ccc;font-weight: bold;margin-left: 0.5rem;}
.search-css{line-height: 30px;font-size: 0.9rem;color:#ccc;font-weight: bold;margin-left: 0.5rem;}
select{height: 25px;border-radius:0.6rem;}
input{border-radius: 0.6rem;outline:none;border-top-style: groove;border-right-style: groove;border-bottom-style: groove;border-left-style: groove;border:1px solid #a1a1a1;text-align: center;line-height:20px;}