Angular-DataTables custom filter

Question

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"}]}

I followed your code. But always its shows all records. No pagination for me. How did you fixed that? — Giri Annamalai M
– Giri Annamalai M, Commented Mar 16, 2016 at 6:57

Malinois · Accepted Answer · 2015-02-26 13:55:02Z

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

hey I am trying to use this plugin but getting errors DO you have any sample live page where I can find where I am missing

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You can use withFnServerData with fromSource functions instead of 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
    });

:)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 9, 2015 at 2:28

dangret

363 bronze badges

Comments

AdrieanKhisbe · Accepted Answer · 2015-03-10 10:44:50Z

Ok sorry its not a full blown example. This only works with angular and datatables, if you do a filter on the ng-repeat eg | aFilter:this The this transfers the scope. The filtering applied can now be quite complex. Within the ng-controller <div> you can have an html partial containing drop downs or input texts, all having an ng-model value.

When these change they kick off the filter routineaFilter an angular.filter('aFilter'.... js routine. The records are piped through the afilter routine allowing the ones wanted to be pushed onto an array and this is what is returned with the return. It doesn't work with breeze, yet. Be aware it is unlikely to be server side. To deal with server side maybe an SQL call in the service....another day.

eg in the ng-table id="test" :

<tr ng-repeat="edRec in aSetOfJSonRecords | aFilter:this | orderBy:'summat'">
{{edRec.enCode}} etc
</tr>

in the aFilter, the fltEnCode represents the ng-model values, the test variable allows freedom from nulls causing issues upon comparison, good idea to test for undefined first:

   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;
        };
    }]);

Hope its of some use. I've avoided boolean variables as they have given grief before. Odd occasions have needed an ng-change in the html items pointing to an angular function resetting the data by calling the getTheItemsForTest() in the controller. This redraws the list. Having

$scope.dtOptions = {
     stateSave: false, .......

in your controller, keeps the sorting columns correct.

$(document).ready(function() {
    var table = $('#test').DataTable();
    table.draw();
};

might also be useful if its recalcitrant. I need to know how to make it work for breeze??? Enjoy..

George Kastour · Accepted Answer · 2016-05-23 14:34:48Z

0

here is what I really missed after I searched alot

bower install datatables-light-columnfilter

answered May 23, 2016 at 14:34

George Kastour

211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular-DataTables custom filter

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related