DataTables 查詢

html

查詢

                   			<td>
                   				<div class="layui-input-inline">
                   					<input type="text" id="orderNo"  placeholder="訂單號" autocomplete="off" class="layui-input">
                   				</div>
                   				<div class="layui-input-inline">
                   					<input type="text" id="carNo"  placeholder="車牌號" autocomplete="off" class="layui-input">
                   				</div>
								<div class="layui-input-inline">
									<select id="orderState"  class="layui-form-label">
										<option value="" selected="selected">狀態</option>
										<option value="0">新增</option>
										<option value="1">髮卡</option>
										<option value="2">進廠</option>
										<option value="3">一次稱重</option>
										<option value="4">切水</option>
									</select>
								</div>
								<div class="layui-input-inline">
	                   				<button id="searchBt" class="layui-btn "><i class="layui-icon">&#xe615;</i>搜索</button>
                   				</div>
                   			</td>

表格初始化時：

	example = 
    	$('#dt-table').dataTable({
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"bStateSave": true,//狀態保存
        	"language": {
                "url": "/js/plugin/datatables/Chinese.lang"
            },
        	"ajax": {
        		"url" : "/orders",
        		"type":"get",
        		"data":function(d){
    				d.serviceType = 0;//初始化時想加的參數
    				d.orderNo = $("#orderNo").val();//查詢參數
    				d.orderState = $("#orderState").val();//查詢參數
    			}
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",	
            "columns": [
				{"data" : "id", "defaultContent" : ""},
				{"data" : "orderNo", "defaultContent" : ""},
				{"data" : "carNo", "defaultContent" : ""},
				.....略過

查詢方法

$("#searchBt").click(function(){
    $('#dt-table').DataTable().ajax.reload();//刷新重新加載
});