Angular-DataTables 自定义过滤器
Posted
技术标签:
【中文标题】Angular-DataTables 自定义过滤器【英文标题】：Angular-DataTables custom filter 【发布时间】：2015-04-26 03:40:48 【问题描述】：我正在尝试通过服务器端处理向 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"]
【问题讨论】：
我遵循了你的代码。但它总是显示所有记录。对我来说没有分页。你是怎么解决的？ 【参考方案1】：经过搜索和浏览，结合几个例子，想出了这个。
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 并检查自定义过滤器，希望这会对某人有所帮助
【讨论】：
嘿，我正在尝试使用此插件，但出现错误您是否有任何示例实时页面，我可以在其中找到我丢失的地方【参考方案2】：您可以将 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
);
:)
【讨论】：
【参考方案3】：好吧，抱歉，这不是一个完整的例子。这仅适用于 angular 和 datatables，如果您对 ng-repeat eg | aFilter:this 进行过滤，this 会转移范围。应用的过滤现在可能非常复杂。在 ng-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();
;
如果它顽固，也可能有用。我需要知道如何让它为微风工作？？？享受..
【讨论】：
【参考方案4】：这是我经过大量搜索后真正错过的内容
凉亭安装 datatables-light-columnfilter
【讨论】：
以上是关于Angular-DataTables 自定义过滤器的主要内容，如果未能解决你的问题，请参考以下文章
使用 Angular-DataTables 更新数据时会重置分页
angular-datatables - 当在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表