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