jQuery DataTables is a pretty complicated library. Whenever I've had the "pleasure" of using the jQuery library, I have been befuddled by the unnecessary complexity of the basic end-user documentation, and of the extensiveness of the API. Anyhow, rant over.
provides an Angular directive so you can try and use jQuery datatables "the Angular way". The DataTables library provides the `DOMLayout` option where you specify a genericized layout for the table to follow. Unfortunately this means that you don't have much control over how the elements look. Now in jQuery this is easy to override by attaching event handlers to elements outside of the "realm" of the DataTables markup, and the code to do that would look something like the below:
oTable = $('#myTable').dataTable();
Seeing as the eventing system in Angular works differently, a solution for a custom search box outside of the DataTables markup was going to be a little harder. But luckily I figured it out.
Angular-datatables exposes the `dt-instance` directive where you can provide a callback function to be executed when the table instance is fully initialised:
<table datatable="ng" dt-instance="dtInstanceCallback" class="row-border hover" width="100%">
In your Angular controller, add the `dtInstanceCallback` to the current `$scope` as below:
$scope.dtInstanceCallback = function(dtInstance)
var datatableObj = dtInstance.DataTable;
$scope.tableInstance = datatableObj;
What the code above is doing is grabbing the "Angular-equivalent" of the jQuery DataTables `oTable` object in the jQuery snippet above and adding it to the `$scope` object. We will use this at a latter point when binding the change event to the input outside of the datatable.
Next up, we need to add an input to our view which will be our search box:
<input type="text" ng-model="searchQuery" ng-change="searchTable()" placeholder="Search"/>
Notice that I have specified that the `ng-model` directive of this search box is `searchQuery`. This is vital to this working!
At the beginning of your controller code, initialise this variable, like so:
$scope.searchQuery = '';
Now for the final piece in the Angular puzzle.. we need to listen for any change events taking place on the input using the `ng-change` directive. In the controller, add a new `searchTable` function to the `$scope`. We grab the text that has been queried by referring to the `$scope.searchQuery` value that has been bound to the input using the `ng-model` directive. Finally we use the `search('YOUR QUERY HERE')` function much like the jQuery example above, chaining the `draw()` function to it afterwards so that the results are updated:
$scope.searchTable = function()
var query = $scope.searchQuery;
And that is literally it! Took me a while to figure this one out but it was actually quite easy in the end.
Hopefully this will be of help to Angular people on a quest for answers in the near future. Any questions, then feel free to ask.