2015-02-24 20 views
7

Ich versuche, einen benutzerdefinierten Filter zu eckigen-DataTables mit serverseitigen Verarbeitung, die perfekt mit Sortieren und integrierte Suche nach Datenträgern funktioniert.Angular-DataTables benutzerdefinierten Filter

Ich folgte Beispiel Angular-DataTables, um die serverseitige Verarbeitung zu erstellen und die DataTable einzurichten, in der Suche habe ich einige Informationen gefunden, aber nicht in der Lage, es funktionieren zu lassen.

Was ich versuche zu bekommen, ist die Tabelle mit gefilterten Daten neu zu zeichnen, sobald die checkbox [Player] ausgelöst wurde.

Kennt jemand eine Lösung dafür oder hat ein Arbeitsbeispiel dafür?

haben dieses Beispiel Custom Table Filter gefunden, aber es scheint, dass es auch nicht funktioniert.

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

'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 auf Last:

{"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"}]} 
+0

Ich folgte Ihren Code installieren. Aber immer zeigt es alle Datensätze. Keine Seitennummerierung für mich. Wie hast du das behoben? –

Antwort

0

Nach der Suche und Browsing, kombiniert einige Beispiele und kam mit Dies.

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

    }]); 

und auf das Backend gehen Sie einfach durch die _POST $ und für benutzerdefinierte Filter überprüfen, hoffentlich jemand helfen

+0

hey Ich versuche, dieses Plugin zu verwenden, aber immer Fehler Haben Sie ein Beispiel Live-Seite wo ich finden kann, wo ich vermisse –

0

Sie verwenden können withFnServerData mit fromSource Funktionen statt withOption:

Diese API ermöglicht es Ihnen, die Standard-Funktion außer Kraft zu setzen um die Daten abzurufen (die $.getJSON nach Tables Dokumentation ist), etwas mehr für Sie geeignet Anwendung.

Es wird hauptsächlich für Datatables v1.9.4 verwendet. Siehe 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 
    }); 

:)

0

Ok es ist nicht ein vollständiges geblasenes Beispiel sorry. Dies funktioniert nur mit eckigen und datatables, wenn Sie einen Filter auf die ng-repeat eg | aFilter:this Die this überträgt den Anwendungsbereich. Die angewendete Filterung kann jetzt sehr komplex sein. Innerhalb der n g-controller<div> können Sie eine HTML-Teil enthalten Dropdown-Menüs oder Eingabetexte, alle mit einem ng-model Wert.

Bei dieser Änderung starten sie die Filterroutine eine angular.filter('aFilter'.... js Routine. Die Datensätze werden durch die Filterroutine geleitet, so dass die gewünschten auf ein Array geschoben werden können und das wird mit der Rückgabe zurückgegeben. Es funktioniert noch nicht mit Brise. Beachten Sie, dass es unwahrscheinlich ist, Server-Seite zu sein. Um mit der Server-Seite umzugehen, kann vielleicht ein SQL-Aufruf im Dienst sein .... an einem anderen Tag.

zB im ng-table id="test":

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

im aFilter, die fltEnCode stellt die ng-model Werte, die Prüfgröße Freiheit von nulls ermöglicht Probleme beim Vergleich verursacht, gute Idee für nicht definierte zuerst zu testen:

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

Hoffe, dass es einige Verwendung. Ich habe Boolesche Variablen vermieden, da sie schon vorher Trauer gegeben haben. Seltsame Anlässe haben eine ng-change in den HTML-Elementen benötigt, die auf eine Winkelfunktion zeigen, die die Daten zurückgesetzt, indem der getTheItemsForTest() in der Steuerung aufgerufen wird. Dies zeichnet die Liste neu. Mit

in Ihrem Controller, hält die Sortierreihen korrekt.

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

könnte auch nützlich sein, wenn es widerspenstig ist. Ich muss wissen, wie man es für die Brise macht ??? Genießen Sie ..

0

hier ist, was ich wirklich vermisst, nachdem ich eine Menge

gesucht

Bower Datentabellen-Licht-columnfilter

Verwandte Themen