title: columnFilter plugin not working with Angular DataTables Server Side Processing
body: <p>I am using Angular datatables (<a href="https://github.com/l-lin/angular-datatables" rel="nofollow noreferrer">https://github.com/l-lin/angular-datatables</a>) with server side processing, everything works fine if I didn't add the column filter But once I add the <code>withColumnFilter</code> option then search, pagination and records per page stop working. </p>
  
  <p>Here is my HTML part:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="row-border hover"&gt;
  &lt;tfoot&gt;
  &lt;tr&gt;
    &lt;th&gt;First Name&lt;/th&gt;
    &lt;th&gt;Last Name&lt;/th&gt;
    &lt;th&gt;Email ID&lt;/th&gt;
    &lt;th&gt;Phone Number&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Part:</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular
  .module('com.module.users')
  .controller('UserCtrl', UserCtrl);
  
  UserCtrl.$inject = ['$state', '$rootScope', 'ENV', 'DTOptionsBuilder', 'DTColumnBuilder'];
  function UserCtrl($state, $rootScope, ENV, DTOptionsBuilder, DTColumnBuilder) {
  var vm = this;
  
  vm.currentPageState = $state.current.stateDesc;
  
  vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
      url: ENV.apiUrl + vm.currentPageState.rUrl + '/users',
      type: 'POST',
      headers: {
        Authorization: 'Bearer ' + $rootScope.globals.currentAdmin.token
      }
    })
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withBootstrap()
    .withColumnFilter({
      aoColumns: [{
        type: 'text',
        bRegex: true,
        bSmart: true
      }, {
        type: 'text',
        bRegex: true,
        bSmart: true
      }, {
        type: 'text',
        bRegex: true,
        bSmart: true
      }, {
        type: 'text',
        bRegex: true,
        bSmart: true
      }]
    });
  
  vm.dtColumns = [
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
    DTColumnBuilder.newColumn('email').withTitle('Email ID'),
    DTColumnBuilder.newColumn('phone').withTitle('Phone Number')
  ];
  }
  
  })();
  </code></pre>
  
  <p>After debugging what I found is ajax URL getting change to DOM URL. I have attached a screenshot for this:</p>
  
  <p><img src="https://i.stack.imgur.com/X6URB.png" alt="Click here to see the image"></p>