我在服务器端处理中使用Angular数据表(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。我已为此附上了屏幕截图:
最佳答案
它使用withFnServerData代替了ajax选项。
关于angularjs - columnFilter插件不适用于Angular DataTables服务器端处理,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34083324/