列过滤插件无法与Angular DataTables服务器端处理一起使用。

Question

我正在使用带有服务器端处理的Angular datatables (https://github.com/l-lin/angular-datatables)，如果我没有添加列过滤器，一切都正常。但是一旦我添加了withColumnFilter选项，搜索、分页和每页记录数就停止工作了。

以下是我的HTML部分：

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

JS部分：

(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')
];
}

})();

我发现的问题是ajax URL被更改为DOM URL。我已经附上了截图：

- Govind Sah

---

请提供您代码的详细信息。请参阅如何提出一个好问题和如何创建一个最小、完整和可验证的示例。 - Tristan

请不要将问题标记为紧急。对于现在和一年后的读者来说，这并不紧急。 - halfer

请参见 https://github.com/l-lin/angular-datatables/issues/475。 - l-lin

嗨l-lin，我已经检查了问题＃475，你在其中引用了问题＃467，但似乎没有解决。jQuery列过滤器似乎不支持它。 - Govind Sah

Answer 1

使用 withFnServerData 而不是 ajax 选项可以使其正常工作。

- Govind Sah