Angular-DataTables自定义过滤器

Question

我想添加一个自定义过滤器到角色数据表与服务器端处理，这完美的排序和内置搜索数据表。

我正在以下示例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"}]} 

Answer 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和检查自定义过滤器，希望这将帮助别人

Answer 2

您可以使用withFnServerData with fromSource功能代替 withOption：

该API允许你覆盖默认的函数来检索数据（根据数据表文件是$.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 
    }); 

---

:)

Answer 3

好对不起它不是一个完全成熟的例子。这只适用于角度和数据表，如果您对ng-repeat eg | aFilter:this做了过滤器，则this将传输范围。应用的过滤现在可能非常复杂。在n g-controller<div>中，您可以拥有一个包含下拉列表或输入文本的html部分，全部具有ng-model值。

当这些变化时，他们启动了过滤器例程aFilter和angular.filter('aFilter'.... js例程。这些记录通过过滤器例行程序传递，允许那些想要被推入数组的数据，这是返回的数据。它不适用于微风，但。请注意它不太可能是服务器端。为了处理服务器端，可能会在另一天的服务中发出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; 
     }; 
    }]); 

希望它的一些用途。我已经避免了布尔变量，因为他们之前已经给出了悲伤。奇怪的场合需要一个ng-change在html项目中指向一个角度函数，通过调用控制器中的getTheItemsForTest()来重置数据。这将重新绘制列表。有

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

在您的控制器，保持排序列正确。

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

也可能是有用的，如果它顽抗。我需要知道如何让它为微风工作？享受..

Answer 4

这里是我真的很想念我之后很多搜索

凉亭安装数据表，光columnfilter