angularjs – Angular-DataTables自定义过滤器

发布时间：2020-12-17 08:47:27 所属栏目：安全来源：网络整理

导读：我正在尝试使用服务器端处理为angular-DataTables添加自定义过滤器,这与排序和内置数据表搜索完美配合. 我正在按照示例Angular-DataTables,构建服务器端处理并设置DataTable,在搜索时我发现了一些信息但是无法使其工作. 我想要获得的是在触发复选框[Player]

我正在尝试使用服务器端处理为angular-DataTables添加自定义过滤器,这与排序和内置数据表搜索完美配合.

我正在按照示例Angular-DataTables,构建服务器端处理并设置DataTable,在搜索时我发现了一些信息但是无法使其工作.

我想要获得的是在触发复选框[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",{"id":"3","name":"Nesta","position":"back",{"id":"4","name":"Costacurta",{"id":"5","name":"Doc Brown","position":"staff","type":"medic"},{"id":"6","name":"Jose","type":"manager"},{"id":"7","name":"Ferguson",{"id":"8","name":"Zinedine","type":"director"}]}

搜索和浏览后,结合几个例子,想出了这个.

HTML：

<label><input type="checkbox" id="customFilter" value="player" ng-click="reload()" > Player</label>

JS：

'use strict';

    angular.module('showcase',"DTInstances",function ($scope,DTColumnBuilder,DTInstances) {

    //function ServerSideProcessingCtrl(DTOptionsBuilder,DTColumnBuilder) {
        console.log($scope);

        $scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('ajax',type: 'POST',// CUSTOM FILTERS
                    data: function (data) {
                        data.customFilter = $('#customFilter').is(':checked');
                    }
                })
            // or here
                .withDataProp('data')
                .withOption('serverSide',DTColumnBuilder.newColumn('type').withTitle('Type')
        ];

        DTInstances.getLast().then(function (dtInstance) {
            $scope.dtInstance = dtInstance;
        });

        $scope.reload = function(event,loadedDT) {
            $scope.dtInstance.reloadData();
        };

    }]);

并在后端只需通过$_POST并检查自定义过滤器,希望这将有助于某人

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!