Question

jquery 的datatable 怎么用一个按钮代替它的搜索

Answer 1

可以自己定义一个 input框 和按钮，点击按钮的时候，调用一个我们自己定义的函数，函数如下：

function search_fun(){
    var val = $('#search_val').val();//获取我们自己定义的input值
    dataTable._fnFilter(val);//过滤dataTable
}

Answer 2

网页链接1.10.16

<script>
var table = $('#datatable-responsive').DataTable();


$("#datatable-responsive_filter").css("display","none");

$("#datatable-responsive_filter").parent().append('<div class="input-group pull-right"><input id="searchforme" type="text" class="form-control" placeholder="Search for..."><button id="clearsearchinput" type="button" class="btn btn-round btn-xs" style="position:absolute; top:6px;right:42px; z-index:99;display:none;background-color:transparent;"><i class="fa fa-close"></i></button><span class="input-group-btn"><button id="go" class="btn btn-default" type="button"><i class="fa fa-search"></i></button></span></div>');        var table = $('#datatable-responsive').DataTable();

$(document).on( 'click','#go', function () {
table.search( $('#searchforme').val() ).draw();

} );
$(document).on( 'keyup','#searchforme', function () {            if($(this).val().length > 0){
$('#clearsearchinput').css('display','block');
}else{
$('#clearsearchinput').css('display','none');
}
$(document).on( 'click','#clearsearchinput', function () {
$('#searchforme').val('');
$(this).css('display','none');
} );
} );    </script>