AngularJs with DataTable custom search box

Question

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.

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?

Here is my HTML implementation

<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>

Here is the angular controller

 $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();
};

Kira Hao · Accepted Answer · 2016-01-18 17:56:29Z

12

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();
};

answered Jan 18, 2016 at 17:56

Kira Hao

1,1372 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ankit Over a year ago

It gives me $scope.dtInstance.DataTable is undefined. This problem is only when making custom search box otherwise datatable and search works fine. Do i need to change something here as well. angular.module('xyz') .controller('OverviewCtrl', ['$scope', function($scope ) {

Harrison Over a year ago

@Ankit you need to add dt-instance="dtInstance" in HTML, details here: l-lin.github.io/angular-datatables/archives/#!/dtInstances

Kugan Kumar Over a year ago

lack of documentation, hope angular data-table team would produce their own documentation.

Rumid Over a year ago

Isn't line ` $scope.dtInstance.DataTable.search($scope.searchText);` obsolete?

Kira Hao Over a year ago

@Rumid after 2 years look back to my answer, I think I have some explanation. search() is part of Datatable jQuery API. I just check it is still working since v1.10 datatables.net/reference/api/search() This code will work is because $scope calling datatable instance and call its native API. search().draw() reference from docs too.

|

Collectives™ on Stack Overflow

AngularJs with DataTable custom search box

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related