原图
如图所示把右上角的搜索框去掉,然后自己写左上角的搜索框
隐藏搜索框设置 :"searching": false,
var table;
$(document).ready(function() {
table=$("#example").dataTable({
"bProcessing" : true,
"bServerSide" : true,
"searching": false,
"lengthChange": false,
"bAutoWidth": false,
"sort" : "position",
"bStateSave" : false,
"iDisplayLength" : 10,
"iDisplayStart" : 0,
"sAjaxSource" : url
"aoColumns": [
{
"mData": "uuid",
"orderable": false, // 禁用排序
"sDefaultContent": "",
"mRender": function ( data, type, full ) {
//alert(data);
return '<input type="checkbox" οnclick="oncheck(this)" value="'+data+'">';
},
"sWidth":"1%"
}, {
"mData": "ruleName",
"sDefaultContent": "",
"sWidth":"10%"
}, {
"mData": "regular",
"sDefaultContent": "",
"sWidth":"10%"
}, {
"mData": "createTime",
"sDefaultContent": "",
"sWidth":"10%"
}, {
"mData": "fileName",
"sDefaultContent": "",
"orderable": false, // 禁用排序
"mRender": function ( data, type, full ) {
return '<a style="cursor:pointer" οnclick="downloadFile('+"'"+full.uuid+"'"+')">'+data+'</a>';
},
"sWidth":"10%"
}, {
"mData":null,
"orderable": false, // 禁用排序
// "sDefaultContent": '<a href="javascript:void(0)" class="btn btn-primary">删除</a>',
"mRender": function ( data, type, full ) {
return '<a href="javascript:void(0)" class="optionAction" οnclick="del('+"'"+data.uuid+"'"+')" ><i class="fa fa-trash" style=""></i></a><a href="javascript:loadhtml(\''+PATH+'/page/edit.jsp?uuid='+data.uuid+'\')" class="optionAction" style="margin-left:8px;"><i class=\"fa fa-pencil\"></i></a>';
},
"sWidth":"20%"
}],
"oLanguage": { // 国际化配置
"sProcessing": "正在获取数据,请稍后...",
/* "sLengthMenu": "显示 _MENU_ 条",*/
"sZeroRecords": "没有您要的内容",
"sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "最后一页"
}
}});
});
添加搜索 绑定事件
//搜索框
$('#Search').on( 'click', function () {
var val = $('#search_val').val();//获取我们自己定义的input值
table.fnSettings().sAjaxSource="url?sSearch="+val;
table.fnDraw();
});