我正在尝试通过服务器端处理向 angular-DataTables 添加自定义过滤器,该过滤器可以完美地与数据表的排序和内置搜索一起使用。
我在跟踪Angular-DataTables示例,以构建服务器端处理并设置DataTable,在搜索中我发现了一些信息,但未能使其正常工作。
我想要得到的是一旦checkbox [Player]被触发就重新绘制带有过滤数据的表。
checkbox [Player]
有谁知道解决方案或有可行的示例吗?
已找到此示例“ 自定义表格过滤器”,但似乎也不起作用。
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"}]}
搜索和浏览后,结合了几个示例并提出了建议。
<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并检查自定义过滤器,希望这会对某人有所帮助