title: Angular-DataTables custom filter
body: <p>I am trying to add a custom filter to <strong>angular-DataTables</strong> with server side processing, which works perfectly with sorting and built in search of datatables.</p>
  
  <p>I was following example <a href="http://l-lin.github.io/angular-datatables/#/serverSideProcessing" rel="nofollow noreferrer">Angular-DataTables</a>, to build the server side processing and setup the DataTable,  in searching around i have found some info but haven't been able to make it work.</p>
  
  <p>What i am trying to get is to redraw the table with filtered data once the <code>checkbox [Player]</code> has been triggered.</p>
  
  <p>Does anyone know a solution for this or has a working example for this?</p>
  
  <p>have found this example <a href="https://github.com/l-lin/angular-datatables/issues/123" rel="nofollow noreferrer">Custom Table Filter</a>, but it seems it doesn't work either.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="showcase"&gt;&lt;div ng-controller="ServerSideProcessingCtrl"&gt;
  &lt;label&gt;&lt;input type="checkbox" id="customFilter" value="player"&gt; Player&lt;/label&gt;
  &lt;table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"&gt;&lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS part:</p>
  
  <pre><code> 'use strict';
  
      angular.module('showcase', ['datatables'])
              //.controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl);
      .controller('ServerSideProcessingCtrl',["$scope", "DTOptionsBuilder", "DTColumnBuilder", function($scope, DTOptionsBuilder, DTColumnBuilder) {
  
      //function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) {
          console.log($scope);
          $scope.dtOptions = DTOptionsBuilder.newOptions()
                  .withOption('ajax', {
                      // Either you specify the AjaxDataProp here
                      // dataSrc: 'data',
                      url: 'getTableData.php',
                      type: 'POST'
                  })
              // or here
                  .withDataProp('data')
                  .withOption('serverSide', true)
                  .withPaginationType('full_numbers');
          $scope.dtColumns = [
              DTColumnBuilder.newColumn('id').withTitle('ID'),
              DTColumnBuilder.newColumn('name').withTitle('First name'),
              DTColumnBuilder.newColumn('position').withTitle('Position'),
              DTColumnBuilder.newColumn('type').withTitle('Type')
          ];
  
          $scope.$on('event:dataTableLoaded', function(event, loadedDT) {
              console.log(event);
              console.log(loadedDT);
              $('#customFilter').on('change', function() {
                  loadedDT.DataTable.draw();
              } );
  
  
          });
  
      }]);
  </code></pre>
  
  <p>JSON on load:</p>
  
  <pre><code>{"draw":"1","recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Raul","position":"front","type":"player"},{"id":"2","name":"Crespo","position":"front","type":"player"},{"id":"3","name":"Nesta","position":"back","type":"player"},{"id":"4","name":"Costacurta","position":"back","type":"player"},{"id":"5","name":"Doc Brown","position":"staff","type":"medic"},{"id":"6","name":"Jose","position":"staff","type":"manager"},{"id":"7","name":"Ferguson","position":"staff","type":"manager"},{"id":"8","name":"Zinedine","position":"staff","type":"director"}]}
  </code></pre>