关注搜索框样式的修改 和 事件的处理过程:
通过审查元素,搜索框相关的样式有两个:
<style type="text/css">
div.dataTables_filter input {
width: 26em;
}
div.dataTables_filter label {
font-weight: normal;
float: left;
}
</style>
上面是修改搜索框的长度 和 位置的, 其他样式的修改可自行审查元素。
使用jquery 选择元素也可以进行样式修改:
//$("#example_filter label").css({"background-color":"yellow","font-size":"200%"});
// $("#example_filter label").addClass("col-xs-12");
// $("#example_filter label input").addClass("col-xs-12");
搜索事件:
当进行搜索时, 会触发search事件 ,
table.on( 'search.dt', function () {
$('#filterInfo').html( 'Currently applied global search: '+table.search() );
} );
然后datatable 会调用 table.search().draw() .
可以自行写一个搜索框, 然后调用 table.search(str).draw() 完成表格的搜索和重画。
这里的搜索会根据配置的serverSide:true 自动通过ajax 发送后台搜索。