Angular-DataTables 自定义过滤器
Angular-DataTables custom filter
我正在尝试通过服务器端处理将自定义过滤器添加到 angular-DataTables,这与排序和内置数据搜索完美配合tables.
我正在按照示例 Angular-DataTables 构建服务器端处理并设置数据表,在四处搜索时我找到了一些信息但无法使其工作。
我想要得到的是在 checkbox [Player]
被触发后用过滤后的数据重绘 table。
有没有人知道这个的解决方案或有这个的工作示例?
找到了这个例子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"}]}
经过搜索和浏览,结合几个例子得出了这个。
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 并检查自定义过滤器,希望这会对某人有所帮助
您可以将 withFnServerData 与 fromSource 函数一起使用,而不是
withOption:
This API allows you to override the default function to retrieve the data (which is $.getJSON
according to DataTables documentation) to something more suitable for you application.
It's mainly used for Datatables v1.9.4. See 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
});
:)
抱歉,这不是一个完整的例子。这仅适用于 angular 和 datatables,如果您对 ng-repeat eg | aFilter:this
this
进行筛选转移范围。应用的过滤现在可能非常复杂。在 ng-controller
<div>
中,您可以有一个 html 包含下拉列表或输入文本的部分,它们都具有 ng-model
值。
当这些发生变化时,它们会启动过滤器例程aFilter
和 angular.filter('aFilter'....
js 例程。记录通过 afilter 例程进行管道传输,允许将想要的记录推送到数组中,这就是 return 使用 return 编辑的内容。它不适用于 breeze。请注意,它不太可能是服务器端。处理服务器端可能是服务中的 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
指向 angular 函数,通过调用控制器中的 getTheItemsForTest()
来重置数据。这将重新绘制列表。拥有
$scope.dtOptions = {
stateSave: false, .......
在您的控制器中,保持排序列正确。
$(document).ready(function() {
var table = $('#test').DataTable();
table.draw();
};
如果它顽固,也可能有用。我需要知道如何让它为 breeze 工作???享受..
这是我搜索了很多之后真正错过的
bower 安装 datatables-light-columnfilter
我正在尝试通过服务器端处理将自定义过滤器添加到 angular-DataTables,这与排序和内置数据搜索完美配合tables.
我正在按照示例 Angular-DataTables 构建服务器端处理并设置数据表,在四处搜索时我找到了一些信息但无法使其工作。
我想要得到的是在 checkbox [Player]
被触发后用过滤后的数据重绘 table。
有没有人知道这个的解决方案或有这个的工作示例?
找到了这个例子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"}]}
经过搜索和浏览,结合几个例子得出了这个。
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 并检查自定义过滤器,希望这会对某人有所帮助
您可以将 withFnServerData 与 fromSource 函数一起使用,而不是 withOption:
This API allows you to override the default function to retrieve the data (which is
$.getJSON
according to DataTables documentation) to something more suitable for you application.It's mainly used for Datatables v1.9.4. See 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
});
:)
抱歉,这不是一个完整的例子。这仅适用于 angular 和 datatables,如果您对 ng-repeat eg | aFilter:this
this
进行筛选转移范围。应用的过滤现在可能非常复杂。在 ng-controller
<div>
中,您可以有一个 html 包含下拉列表或输入文本的部分,它们都具有 ng-model
值。
当这些发生变化时,它们会启动过滤器例程aFilter
和 angular.filter('aFilter'....
js 例程。记录通过 afilter 例程进行管道传输,允许将想要的记录推送到数组中,这就是 return 使用 return 编辑的内容。它不适用于 breeze。请注意,它不太可能是服务器端。处理服务器端可能是服务中的 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
指向 angular 函数,通过调用控制器中的 getTheItemsForTest()
来重置数据。这将重新绘制列表。拥有
$scope.dtOptions = {
stateSave: false, .......
在您的控制器中,保持排序列正确。
$(document).ready(function() {
var table = $('#test').DataTable();
table.draw();
};
如果它顽固,也可能有用。我需要知道如何让它为 breeze 工作???享受..
这是我搜索了很多之后真正错过的
bower 安装 datatables-light-columnfilter