web-dev-qa-db-ja.com

Angular-DataTablesカスタムフィルター

カスタムフィルターをangular-DataTablesにサーバー側の処理で追加しようとしています。これは、並べ替えやデータテーブルの組み込み検索で完全に機能します。

私は次の例 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"}]}
angularjsdatatabledatatablesangularjs-filter
8
Malinois

検索して閲覧した後、いくつかの例を組み合わせてこれを思いつきました。

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を実行し、カスタムフィルターを確認します。これが誰かに役立つことを願っています

0
Malinois

申し訳ありませんが、本格的な例ではありません。これは、_ng-repeat eg | aFilter:this_でフィルターを実行した場合にangularおよびdatatablesでのみ機能します。thisはスコープを転送します。適用されるフィルタリングは非常に複雑になる可能性があります。 n _g-controller_ _<div>_内に、すべて_ng-model_値を持つドロップダウンまたは入力テキストを含むhtmlパーシャルを含めることができます。

これらが変更されると、フィルタールーチンaFilter __angular.filter('aFilter'...._ jsルーチンが開始されます。レコードはafilterルーチンを介してパイプ処理され、配列にプッシュしたいレコードを許可します。これがreturnで返されます。そよ風にはまだ対応していません。サーバー側になる可能性は低いことに注意してください。サーバー側を処理するために、おそらくサービスでSQL呼び出しを実行します。

例えば_ng-table id="test"_で：

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

aFilterでは、fltEnCodeは_ng-model_の値を表します。テスト変数により、比較時に問題を引き起こすnullがなくなるため、最初に未定義をテストすることをお勧めします。

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

そのいくつかの使用を願っています。以前に悲しみを与えたので、ブール変数は避けました。奇数の場合、HTMLアイテムにコントローラでgetTheItemsForTest()を呼び出してデータをリセットするangular関数を指す__ng-change_が必要です。これにより、リストが再描画されます。持っている

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

コントローラーでは、ソート列を正しい状態に保ちます。

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

その抵抗力がある場合にも役立ちます。私はそれをそよ風のために機能させる方法を知る必要がありますか???楽しい..

0
Bill Dodd

これは私がたくさん検索した後に私が本当に逃したものです

bower install datatables-light-columnfilter

0
George Kastour

withOptionの代わりにwithFnServerDatawithfromSource関数を使用できます：

このAPIを使用すると、デフォルトの関数をオーバーライドしてデータ（$.getJSON DataTablesのドキュメントに従って）アプリケーションに適したものに。

主にDatatables v1.9.4で使用されます。 DataTableのドキュメント を参照してください。

$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
dangret