Filtro personalizzato Angular-Data

Question

Sto tentando di aggiungere un filtro personalizzato a angular-DataTables con elaborazione lato server, che funziona perfettamente con l'ordinamento e la ricerca integrata di datatables.

Stavo seguendo l'esempio Angular-DataTables, per creare l'elaborazione lato server e impostare il DataTable, nella ricerca in giro ho trovato alcune informazioni ma non sono riuscito a farlo funzionare.

Quello che sto cercando di ottenere è di ridisegnare la tabella con i dati filtrati una volta che è stato attivato il checkbox [Player].

Qualcuno sa una soluzione per questo o ha un esempio funzionante per questo?

hanno trovato questo esempio Custom Table Filter, ma sembra che non funzioni neanche.

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 parte:

'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 sul carico:

{"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

Dopo la ricerca e la navigazione, combinato alcuni esempi e si avvicinò con Questo.

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

    }]); 

e sul backend basta andare attraverso il $ _POST e verificare la presenza di filtro personalizzato, speriamo che questo vi aiuterà qualcuno

Answer 2

È possibile utilizzare withFnServerData con dalla funzione invece di withOption:

Questa API consente di sostituire la funzione predefinita per recuperare i dati (che è $.getJSON secondo la documentazione DataTable) a qualcosa di più adatto alla propria applicazione.

Viene utilizzato principalmente per i Datatables v1.9.4. Vedi 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

Ok mi dispiace non è un esempio in piena regola. Funziona solo con angolare e datatables, se si fa un filtro su ng-repeat eg | aFilter:this Il this trasferisce l'oscilloscopio. Il filtro applicato ora può essere abbastanza complesso. All'interno di n g-controller<div> è possibile avere un dropdown parziale HTML contenente o testi di input, tutti aventi un valore ng-model.

Quando questi cambiano, attivano la routine del filtro aFilter una routine angular.filter('aFilter'.... js. I record sono convogliati attraverso la routine del filtro che consente a chi vuole essere spinto su un array e questo è ciò che viene restituito con il ritorno. Non funziona ancora con la brezza. Essere consapevoli che è improbabile che sia lato server. Affrontare il lato server può essere una chiamata SQL nel servizio .... un altro giorno.

esempio nel ng-table id="test":

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

nel aFilter, il fltEnCode rappresenta i valori ng-model, la variabile test consente libertà da valori nulli causando problemi sul confronto, buona idea per testare la prima indefinito:

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

Spero che sia di qualche utilità. Ho evitato le variabili booleane come hanno dato il dolore prima. Occasioni dispari hanno avuto bisogno di un ng-change nelle voci html che punta a una funzione angolare che ripristina i dati chiamando lo getTheItemsForTest() nel controller. Questo ridisegna la lista. Avere

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

nel controller, mantiene corrette le colonne di ordinamento.

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

potrebbe essere utile anche se è recalcitrante. Devo sapere come farlo funzionare per brezza ??? Godetevi ..

Answer 4

qui è quello che mi mancava molto dopo ho cercato un sacco

scrigno di installare DataTable-light-columnfilter