DataTable的实践3 搜索参数

上一章节我们演示了服务端分页 AJAX参数传递参数，搜索是参数的的一部分，今天我们来详细展示搜索参数
先上html代码
 

<div id="sousuo" class="card-header">
		<div class="form-group row">
				<div class="col-sm-2">
						<div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text">用户ID</span></div>
						<input id='user_id'  oninput = "value=value.replace(/[^\d]/g,'')" placeholder="数字" class="form-control" type="text">
				        </div>
				</div>
				<div class="col-sm-2">
						<div class="input-group">
							<div class="input-group-prepend"><span class="input-group-text">用户名</span></div>
								<input id='user_name'  placeholder="包含%会模糊搜索" class="form-control" type="text">
						</div>
					</div>										
										
					<div class="col-sm-2">
						<div class="input-group">
							<button onclick="sousuo()" class="btn btn-secondary"><i class="fas fa-fw fa-binoculars"></i> 搜索</button>
						</div>
					</div>
		</div>

</div>

我的html中搜索不是基于表单，下面上js代码

$(function () {
			//初始化表格
			$("#datatables-dashboard-projects").dataTable({
				language:get_lang(), //提示信息
				bLengthChange: false,
				pageLength: 10,
				autoWidth: false, //禁用自动调整列宽
				stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
				processing: true, //隐藏加载提示,自行处理
				serverSide: true, //启用服务器端分页
				searching: false, //启用原生搜索
				orderMulti: true, //启用多列排序
				order: [[0,'desc']], //默认排序查询,否则复选框一列会出现小箭头
				renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
				pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
				columnDefs: [{
					"targets": 'nosort', //列的样式名
					"orderable": false //包含上样式名‘nosort'的禁止排序
				}],
				//每行回调函数
				"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
					//动态设置class属性
					var str="<label class=\"custom-control custom-checkbox\"><input type=\"checkbox\" class=\"custom-control-input\"  ><span class=\"custom-control-label\">"+aData.user_id+"</span></label>";
					$(nRow).children().eq(0).html(str);
					var obj=$(nRow).attr("about",aData.user_id).children().eq(4).attr("about","coin_val").attr("abbr",aData.coin_val);					
					
				},
				//列表字段
				columns: [
					{ "data": "user_id", orderable:true},
					{ "data": "user_name",orderable:false},
					{ "data": "user_photo",orderable:false},
					{ "data": "sex",orderable:false},
					{ "data": "last_online_time",orderable:true},
				],
				ajax: function (data, callback, settings) {
					//封装请求参数
					var param = {};
					param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
					param.start = data.start;//开始的记录序号
					param.page = (data.start / data.length)+1;//当前页码
					if(data.order.length>0){
						for(var i=0;i<data.order.length;i++){
							data.order[i].column=data.columns[data.order[i].column].data;
						}
						param.order=data.order;
					}
					param.search={};
					if($("#user_id").val()){
						param.search.user_id=$("#user_id").val();
					}					
					if($("#user_name").val()){
						param.search.user_name=$("#user_name").val();
					}
					console.log(param);
					//ajax请求数据
					$.ajax({
						type: "POST",
						url: ajax_url,
						cache: false, //禁用缓存
						data: param, //传入组装的参数
						dataType: "json",
						success: function (result) {
							console.log(result);
 
							//封装返回数据
							var returnData = {};
							returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
							returnData.recordsTotal = result.total;//返回数据全部记录
							returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
							returnData.data = result.data;//返回的数据列表
							//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
							//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
							callback(returnData);
						}
					});
				}
			}).api();
			//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
 
});

代码中  
param.search={};
if($("#user_id").val()){
             param.search.user_id=$("#user_id").val();
}                    
if($("#user_name").val()){
              param.search.user_name=$("#user_name").val();
}

这一部分是获取搜索参数的

 

function sousuo(){
	$("#datatables-dashboard-projects").dataTable().fnDraw(true);
}

function sousuo 这个是 .dataTable 组件重新ajax加载数据的命令。

fnDraw(true)  会回到表格的初始状态，例如回到第一页，false只是重新加载当前页。