columnFilter plugin not working with Angular DataTables Server Side Processing

I am using Angular datatables ( with server side processing, everything works fine if I didn't add the column filter But once I add the withColumnFilter option then search, pagination and records per page stop working.

Here is my HTML part:

<div class="container-fluid">
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="row-border hover">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Email ID</th>
  <th>Phone Number</th>

JS Part:

(function () {
'use strict';

.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
  .withOption('processing', true)
  .withOption('serverSide', true)
    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')


After debugging what I found is ajax URL getting change to DOM URL. I have attached a screenshot for this:


It worked using withFnServerData instead of ajax option.

Need Your Help

Exporting SQL Server to Excel - Too many posts?

c# sql .net sql-server excel

I'm using this function to create an Excel file from my SQL Server query