datatable -- 搜索框

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

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

 

上面是修改搜索框的长度 和 位置的, 其他样式的修改可自行审查元素。

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

你可能感兴趣的:(datatable -- 搜索框)