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"}]}
Ich folgte Ihren Code installieren. Aber immer zeigt es alle Datensätze. Keine Seitennummerierung für mich. Wie hast du das behoben? –