AngularJs与DataTable自定义搜索框 [英] AngularJs with DataTable custom search box
问题描述
我正在使用AngularJs + DataTable库,我希望创建一个自定义控件,可以从DataTable中应用精确的搜索功能,但是可以自定义UI和控件。但是, serch()
返回0长度结果,否则不包含任何字符串值,而 draw()
不是调用正确。
I am working with AngularJs+DataTable library, and I wish to create a custom control that can apply a exactly search function from DataTable, but with custom UI and control. However, the serch()
return 0 length result which no consist any string value and the draw()
isn't call properly.
我已经在github,文章和实现中跟着一些类似的问题,使用 $ scope.dtInstance.DataTable.search(...) .draw();
但结果,它不会工作,所以下面是我尝试,但相同的结果。
任何建议?
I have follow some similar question on github, article and implement with $scope.dtInstance.DataTable.search(...).draw();
but turn out, it wouldn't working, so below is what I try, but same result.
Any suggestion?
这是我的HTML实现
<button class="btn btn-white btn-sm" type="button"
data-toggle="collapse" data-target="#collapseSearch"
aria-expanded="false"
aria-controls="collapseSearch">
<i class="fa fa-search"></i> Search
</button>
<div class="collapse" id="collapseSearch">
<div class="row margin-top-20px">
<div class="col-sm-12 margin-bottom-5px">
<div class="input-group bookingRecordDataTable_filter dataTables_filter">
<span class="input-group-addon input-addon-green">Search</span>
<input type="search" class="form-control"
ng-model="searchText"
ng-change="searchTable()"
placeholder="search"
aria-controls="bookingRecordDataTable">
</div>
</div>
</div>
</div>
<table datatable="ng"
class="table table-hover"
dt-options="dtOptions"
dt-column-defs="dtColumnDefs" id="bookingRecordDataTable"
dt-instance="dtInstanceCallback">
</table>
这是角度控制器
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('bInfo', false)
.withOption('bFilter', false)
.withOption('bAutoWidth', false)
.withOption('bLengthChange', false)
.withDOM("<'col-sm-12't><'col-sm-12'p>")
.withOption('order', [0, 'desc'])
.withBootstrap();
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle('Id').notVisible(),
...
];
$scope.dtInstanceCallback = function(dtInstance)
{
var datatableObj = dtInstance;
$scope.tableInstance = datatableObj;
}
$scope.searchTable = function ()
{
console.log($scope.tableInstance);
var query = $scope.searchText;
console.log(query);
var result = $scope.tableInstance.DataTable.search(query, false, false, false);
console.log(result);
$scope.tableInstance.DataTable.search(query, false, false, true).draw();
};
推荐答案
最后,我发现这部分实现工作如果有人也遇到同样的问题,请分享一下。
finally, I found out this part of implementation work for me, share it out if anyone also face same issues.
$scope.dtInstance = {};
$scope.searchTable = function ()
{
$scope.dtInstance.DataTable.search($scope.searchText);
$scope.dtInstance.DataTable.search($scope.searchText).draw();
};
这篇关于AngularJs与DataTable自定义搜索框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!