title: custom column filter in datatable with angularjs
body: <p>I have implemented server-side processing datatable with angularjs refering this <a href="https://l-lin.github.io/angular-datatables/#/welcome" rel="nofollow noreferrer">link</a>. It works great. Now I want to add custom filter in the datatable like <a href="http://demos.telerik.com/php-ui/grid/filter-row" rel="nofollow noreferrer">this</a>. I have implemented custom search. But outside the table. See <a href="https://i.stack.imgur.com/gq7cy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gq7cy.png" alt="here"></a>. But I want it just below the header of the table with close icon on each field as shown in first link. I have try <a href="http://embed.plnkr.co/hwZmQOPjpNth8T8YuWyr/" rel="nofollow noreferrer">this link</a> too. But I was getting error of jquery.datatable (e[i] is undefined.). I can set PHP side function to get filtered data. So it's not worried task for me. I'm getting problem in setting those text/select boxes in the position as shown in first link with close icon. If anyone can help me, it will be appreciated. Here is my code for HTML and JS.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row" ng-app="tagApp" ng-controller="tagCtrl as tagapp"&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="row" style="margin-bottom: 15px;"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div id="searchForm" class="col-md-10"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;input type="text" placeholder="Search Tag" name="tag" class="form-control"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;input type="text" placeholder="Search Description" name="description" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;button id="searchData" class="btn btn-submit" ng-click="tagapp.dataSearch()"&gt;Search&lt;/button&gt;
                      &lt;button id="clearSearch" class="btn btn-submit" ng-click="tagapp.clearSearch()"&gt;Clear&lt;/button&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="datatable" class="dataTables_wrapper no-footer"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 "&gt;
                      &lt;table id="" datatable="" dt-options="tagapp.dtOptions" dt-columns="tagapp.dtColumns" dt-instance="tagapp.dtInstance" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed row-border hover"&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('tagApp', ['datatables'])
      .controller('tagCtrl', ['DTOptionsBuilder', 'DTColumnBuilder', '$scope', '$http', '$compile', tagCtrl]);
  
  
  function tagCtrl(DTOptionsBuilder, DTColumnBuilder, $scope, $http, $compile) {
      var vm = this;
  
      vm.API_URL = base_path + 'api/v1/';
      vm.dataSearch = dataSearch;
      vm.clearSearch = clearSearch;
      vm.dtInstance = {};
      vm.tags = {};
  
      var headers = {'Content-Type': 'application/x-www-form-urlencoded'};
      })
  
      vm.dtOptions = DTOptionsBuilder.newOptions()
          .withOption('ajax', {
              // Either you specify the AjaxDataProp here
              dataSrc: 'data',
              url: vm.API_URL + 'tags',
              type: 'GET',
              headers: headers
          })
          // or here
          .withDataProp('data')
          .withOption('processing', true)
          .withOption('serverSide', true)
          .withOption('lengthMenu', [[5, 10, 50, 100, -1], [5, 10, 50, 100, "All"]])
          .withPaginationType('full_numbers')
          .withOption('createdRow', createdRow);
  
      vm.dtColumns = [DTColumnBuilder.newColumn('in_tag_id').withTitle('ID').notVisible(),
      DTColumnBuilder.newColumn('st_name').withTitle('Tag'),
      DTColumnBuilder.newColumn('st_description').withTitle('Description').notSortable(),
      DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(actionHtml)
  ];
  
  function createdRow(row, data, dataIndex) {
      // Recompiling so we can bind Angular directive to the DT
      $compile(angular.element(row).contents())($scope);
  }
  
  function actionHtml(data, type, full, meta) {
      vm.tags[data.in_tag_id] = data;
  
      var prmsn = '';
      if (data.action == 1)
      {
          prmsn = '&lt;button class="btn btn-default btn-rounded btn-sm" id="editTag" data-toggle="modal" data-target="#tagModal" ng-click="tagapp.toggle(\'edit\', ' + data.in_tag_id + ')"&gt;&lt;span class="fa fa-pencil"&gt;&lt;/span&gt;&lt;/button&gt;';
      }
      else
      {
          prmsn = 'NP';
      }
      return prmsn;
  }
  
  function dataSearch()
  {
      var qrystrng = '?';
      $('#searchForm input').each(function () {
          qrystrng += $(this).attr('name') + '=' + $(this).val() + '&amp;';
      });
      $('#searchForm select').each(function () {
          qrystrng += $(this).attr('name') + '=' + $(this).val() + '&amp;';
      });
      qrystrng = qrystrng.slice(0, -1);
      var link = vm.API_URL + 'tags' + qrystrng;
      vm.dtInstance.changeData(link);
  }
  
  function clearSearch()
  {
      $('#searchForm input').each(function () {
          $(this).val('');
      });
      $('#searchForm select').each(function () {
          $(this).prop('selectedIndex', 0);
      });
      vm.dataSearch();
  }
  }
  </code></pre>
  
  <p><strong>NOTE:</strong> I have used these libraries only.</p>
  
  <ul>
  <li>jquery.dataTables.min.js</li>
  <li>dataTables.bootstrap.min.js</li>
  <li>angular-datatables.min.js</li>
  </ul>