小编Kir*_*Hao的帖子

AngularJs与DataTable自定义搜索框

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

这是角度控制器

 $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 = …
Run Code Online (Sandbox Code Playgroud)

javascript datatable jquery angularjs

4
推荐指数
1
解决办法
7782
查看次数

标签 统计

angularjs ×1

datatable ×1

javascript ×1

jquery ×1