关注搜索框样式的修改 和 事件的处理过程：

通过审查元素，搜索框相关的样式有两个：

 <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 发送后台搜索。