Angular-DataTables 自定义过滤器答案

【问题标题】：Angular-DataTables custom filterAngular-DataTables 自定义过滤器
【发布时间】：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"}]}

【问题讨论】：

我遵循了你的代码。但它总是显示所有记录。对我来说没有分页。你是怎么解决的？

标签： angularjs datatable datatables angularjs-filter

【解决方案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

【讨论】：