带有数据表自定义搜索框的 AngularJs
AngularJs with DataTable custom search box
我正在使用AngularJs + DataTable库,我希望创建一个自定义控件,该控件可以应用DataTable中的精确搜索功能,但具有自定义UI和控件。但是,serch()
返回 0 长度结果,其中不包含任何字符串值,并且未正确调用draw()
。
我在 github、文章和实现上遵循了一些类似的问题$scope.dtInstance.DataTable.search(...).draw();
但事实证明,它不起作用,所以下面是我尝试的,但结果相同。有什么建议吗?
这是我的 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();
};
最后,我为我找到了这部分实现工作,如果有人也遇到同样的问题,请分享出来。
$scope.dtInstance = {};
$scope.searchTable = function ()
{
$scope.dtInstance.DataTable.search($scope.searchText);
$scope.dtInstance.DataTable.search($scope.searchText).draw();
};
相关文章:
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 在禁用ng的情况下搜索JSON对象(AngularJS)
- 使用过滤器进行AngularJS搜索
- 使用ng类(AngularJS)搜索JSON对象
- Angularjs从字符串开始搜索
- 带有AngularJS指令的类似Google的搜索框
- Angularjs-分离全局搜索和页面内容
- AngularJS搜索延迟,直到用户输入字段
- AngularJS搜索没有'不起作用
- Angularjs搜索整个HTML
- AngularJS搜索过滤器在数组中进入对象
- 使用 $timeout 来限制 Angularjs 1.2 搜索应用程序中发出的 http 请求量
- 优化 AngularJS 搜索过滤器
- 用AngularJS搜索Flickr,结果不允许我一直滚动到顶部
- 如何用AngularJS搜索JSON
- AngularJS搜索输入框带有动态的和可操作的图标
- 如何在字典上使用AngularJS搜索过滤器
- AngularJS搜索对象数组