角数据表自定义过滤器 [英] Angular-DataTables custom filter
本文介绍了角数据表自定义过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图自定义过滤器添加到角数据表与服务器端处理，这与整理工作完美和内置的搜索数据表中。
我在下面的例子中角的数据表，要构建服务器端处理和设置DataTable中，围绕寻找我已经找到了一些信息，但一直没能使其正常工作。
什么，我试图让与过滤数据重绘表一旦复选框[播放]被触发。
有谁知道一个解决方案，或有一个工作示例此？
已经发现这个例子自定义表格过滤器，但现在看来，这也不行。
HTML
＆LT; DIV NG-应用=橱窗＆GT;＆LT; DIV NG控制器=ServerSideProcessingCtrl＆GT;
＆LT;标签＆gt;＆LT;输入类型=复选框ID =customFilterVALUE =玩家＆GT;播放器和LT; /标签＆gt;
＆LT;表数据表=DT-选项=dtOptionsDT-列=dtColumns级=行边界悬停＆GT;＆LT; /表＆gt;
JS部分：
使用严格的; angular.module（'展示'，['数据表']）
//.controller('ServerSideProcessingCtrl'，ServerSideProcessingCtrl）;
.controller（'ServerSideProcessingCtrl'，[$范围，DTOptionsBuilder，DTColumnBuilder功能（$范围，DTOptionsBuilder，DTColumnBuilder）{ //功能ServerSideProcessingCtrl（DTOptionsBuilder，DTColumnBuilder）{
的console.log（$范围内）;
$ scope.dtOptions = DTOptionsBuilder.newOptions（）
.withOption（'阿贾克斯'，{
//无论您在此处指定的AjaxDataProp
// DATASRC：数据，
网址：'getTableData.php'，
输入：POST
}）
//或这里
.withDataProp（数据）
.withOption（'服务器端'，真）
.withPaginationType（'full_numbers'）;
$ scope.dtColumns = [
DTColumnBuilder.newColumn（ID）。withTitle（ID），
DTColumnBuilder.newColumn（'名'）。withTitle（'名'），
DTColumnBuilder.newColumn（'位置'）。withTitle（'位置'），
DTColumnBuilder.newColumn（类型）。withTitle（类型）
]; $ $范围在（'事件：dataTableLoaded'，函数（事件，loadedDT）{
的console.log（事件）;
的console.log（loadedDT）;
$（'＃customFilter'）。在（'变化'，函数（）{
loadedDT.DataTable.draw（）;
}）;
}）; }]）;
负载JSON：
<$p$p><$c$c>{\"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\"}]}解决方案
搜索和浏览，结合一些例子和后想出了这个。
HTML
＆LT;标签＆gt;＆LT;输入类型=复选框ID =customFilterVALUE =玩家NG点击=重装（）＆GT;播放器和LT; /标签＆gt;
JS：
使用严格的; angular.module（'展示'，['数据表']）
//.controller('ServerSideProcessingCtrl'，ServerSideProcessingCtrl）;
.controller（'ServerSideProcessingCtrl'，[$范围，DTOptionsBuilder，DTColumnBuilder，DTInstances功能（$范围，DTOptionsBuilder，DTColumnBuilder，DTInstances）{ //功能ServerSideProcessingCtrl（DTOptionsBuilder，DTColumnBuilder）{
的console.log（$范围内）; $ scope.dtOptions = DTOptionsBuilder.newOptions（）
.withOption（'阿贾克斯'，{
//无论您在此处指定的AjaxDataProp
// DATASRC：数据，
网址：'getTableData.php'，
输入：POST，
//自定义过滤器
数据：功能（数据）{
。data.customFilter = $（'＃customFilter'）是（'：检查'）;
}
}）
//或这里
.withDataProp（数据）
.withOption（'服务器端'，真）
.withPaginationType（'full_numbers'）;
$ scope.dtColumns = [
DTColumnBuilder.newColumn（ID）。withTitle（ID），
DTColumnBuilder.newColumn（'名'）。withTitle（'名'），
DTColumnBuilder.newColumn（'位置'）。withTitle（'位置'），
DTColumnBuilder.newColumn（类型）。withTitle（类型）
]; DTInstances.getLast（）。然后（功能（dtInstance）{
$ scope.dtInstance = dtInstance;
}）; $ scope.reload =功能（事件，loadedDT）{
$ scope.dtInstance.reloadData（）;
}; }]）;
和后端刚好经过$ _ POST和检查自定义过滤器，希望这将帮助别人
i am trying to add a custom filter to angular-DataTables with server side processing, which works perfectly with sorting and built in search of datatables.
I was following example Angular-DataTables, to build the server side processing and setup the DataTable, in searching around i have found some info but haven't been able to make it work.
What i am trying to get is to redraw the table with filtered data once the checkbox [Player] has been triggered.
Does anyone know a solution for this or has a working example for this?
have found this example Custom Table Filter, but it seems it doesn't work either.
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 part:
'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 on load:
{"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"}]}
解决方案
After searching and browsing, combined few examples and came up with this.
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();
};
}]);
and on the backend just go through the $_POST and check for custom filter, hopefully this will help someone
这篇关于角数据表自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
