我正在尝试使用服务器端处理向 angular-DataTables 添加自定义过滤器,这与排序和内置数据表搜索完美配合。
我正在关注示例Angular-DataTables,构建服务器端处理并设置DataTable,在搜索时我找到了一些信息,但无法使其正常工作。
我想要的是,在checkbox [Player]
被触发后,使用过滤后的数据重绘表格。
有没有人知道这方面的解决方案或有一个有效的例子?
找到了这个例子Custom Table Filter,但它似乎也不起作用。
HTML:
<div ng-app="showcase"><div ng-controller="ServerSideProcessingCtrl">
<label><input type="checkbox" id="customFilter" value="player"> Player</label>
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
JS部分:
'use strict';
angular.module('showcase', ['datatables'])
//.controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl);
.controller('ServerSideProcessingCtrl',["$scope", "DTOptionsBuilder", "DTColumnBuilder", function($scope, DTOptionsBuilder, DTColumnBuilder) {
//function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) {
console.log($scope);
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
// dataSrc: 'data',
url: 'getTableData.php',
type: 'POST'
})
// or here
.withDataProp('data')
.withOption('serverSide', true)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('name').withTitle('First name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('type').withTitle('Type')
];
$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
console.log(event);
console.log(loadedDT);
$('#customFilter').on('change', function() {
loadedDT.DataTable.draw();
} );
});
}]);
加载JSON:
{"draw":"1","recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Raul","position":"front","type":"player"},{"id":"2","name":"Crespo","position":"front","type":"player"},{"id":"3","name":"Nesta","position":"back","type":"player"},{"id":"4","name":"Costacurta","position":"back","type":"player"},{"id":"5","name":"Doc Brown","position":"staff","type":"medic"},{"id":"6","name":"Jose","position":"staff","type":"manager"},{"id":"7","name":"Ferguson","position":"staff","type":"manager"},{"id":"8","name":"Zinedine","position":"staff","type":"director"}]}
答案 0 :(得分:0)
搜索和浏览后,结合几个例子,并提出了这个问题。
HTML:
<label><input type="checkbox" id="customFilter" value="player" ng-click="reload()" > Player</label>
JS:
'use strict';
angular.module('showcase', ['datatables'])
//.controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl);
.controller('ServerSideProcessingCtrl',["$scope", "DTOptionsBuilder", "DTColumnBuilder","DTInstances", function ($scope, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
//function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) {
console.log($scope);
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
// dataSrc: 'data',
url: 'getTableData.php',
type: 'POST',
// CUSTOM FILTERS
data: function (data) {
data.customFilter = $('#customFilter').is(':checked');
}
})
// or here
.withDataProp('data')
.withOption('serverSide', true)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('name').withTitle('First name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('type').withTitle('Type')
];
DTInstances.getLast().then(function (dtInstance) {
$scope.dtInstance = dtInstance;
});
$scope.reload = function(event, loadedDT) {
$scope.dtInstance.reloadData();
};
}]);
并在后端只需通过$ _POST并检查自定义过滤器,希望这有助于某人
答案 1 :(得分:0)
您可以将 withFnServerData 与 fromSource 功能一起使用,而不是 的 withOption 强>:
此API允许您覆盖默认函数,以根据DataTables文档检索数据(
$.getJSON
),以更适合您的应用程序。它主要用于Datatables v1.9.4。请参阅DataTable documentation。
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withFnServerData(serverData);
function serverData (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
:)
答案 2 :(得分:0)
好的抱歉,这不是一个完整的例子。这仅适用于 angular 和 datatables ,如果您对ng-repeat eg | aFilter:this
进行过滤,this
会传输范围。应用的过滤现在非常复杂。在n g-controller
<div>
中,您可以拥有包含下拉列表或输入文本的html部分,所有内容都具有ng-model
值。
当这些更改时,他们启动过滤器例程aFilter
和angular.filter('aFilter'....
js例程。记录通过afilter例程传送,允许那些想要被推送到数组上的记录,这就是返回时返回的记录。它并不适用于微风。请注意,它不太可能是服务器端。处理服务器端可能是服务中的SQL调用....另一天。
例如在ng-table id="test"
:
<tr ng-repeat="edRec in aSetOfJSonRecords | aFilter:this | orderBy:'summat'">
{{edRec.enCode}} etc
</tr>
aFilter
中的,fltEnCode
代表ng-model
值,测试变量允许在比较时不会出现空值,最好先测试未定义:
app.filter('aFilter', [function () {
return function (items, $scope) {
var countItems = 0;
var filtered = [];
var isOK = 0;
angular.forEach(items, function (item) {
isOK = 1;
// some conditions
if ($scope.fltEnCode !== "") {
if (item.enCode === null) { test = ""; } else { test = item.enCode; }
if (test.indexOf($scope.fltEnCode) < 0) isOK = 0;
}
// end of conditions
if (isOK > 0) {
filtered.push(item);
countItems++;
}
});
// alert(countItems);
return filtered;
};
}]);
希望它有一些用处。我已经避免了布尔变量,因为他们之前已经给过了悲伤。奇怪的场合需要在html项目中ng-change
指向通过调用控制器中的getTheItemsForTest()
重置数据的角度函数。这会重新绘制列表。
$scope.dtOptions = {
stateSave: false, .......
在控制器中,保持排序列正确。
$(document).ready(function() {
var table = $('#test').DataTable();
table.draw();
};
如果顽固的话,也可能有用。我需要知道如何让它适用于微风???享受..
答案 3 :(得分:0)
这是我搜索了很多后我真正想念的
bower安装datatables-light-columnfilter