web-dev-qa-db-ja.com

サーバー側でのデータテーブルのカスタムフィルタリング

DataTables を使用しており、サーバー側の処理(Django)も使用しています。

テーブルが既にレンダリングされた後、DataTableのデータをカスタムフィルターするために使用する別のテキストフィールドがあります。

以下はうまく動作します(カスタムフィルター列にしたい):

var table = $('#problem_history').DataTable( {
    "bJQueryUI": true,
    "aaSorting": [[ 1, "desc" ]],
    "aoColumns": [
      // various columns here
    ],
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "/getdata",
      "data": {
        "friend_name": 'Robert'
      }
    }  
} );

したがって、ページの読み込み(DataTableの初期読み込み)では、 'Robert'が適切にフィルター処理されます。しかし今、プログラムでデータを変更して、"friend_name" == "Sara"

私はすでに以下を試しました、filteredDataには正しいフィルター済みオブジェクトがありますが、テーブル自体は新しいフィルターで再描画しません。

var filteredData = table.column( 4 ).data().filter(
    function ( value, index ) {
        return value == 'Sara' ? true : false;
    }
);
table.draw();

私もこれを試しましたが運はありませんでした:

filteredData.draw();


どうすればこれを達成できますか?

ご協力ありがとうございました。

10
Amir Mog

これを行う方法についての非常に素晴らしい説明を以下に示します。 https://datatables.net/reference/option/ajax.data

私は現在このコードを使用しています:

"ajax": {"url":"/someURL/Backend",
        "data": function ( d ) {
                  return $.extend( {}, d, {
                    "parameterName": $('#fieldIDName').val(),
                    "parameterName2": $('#fieldIDName2').val()
                  } );
        }
}

次のように呼び出します。

$('#myselectid').change(function (e) {
        table.draw();
});

ボタンをクリックして送信する場合は、.change.clickおよびIDがHTMLのボタンのIDを指していることを確認します

9
Damir Olejar

あなたはほとんどそれを持っています。 datatablesリクエストで渡されるdataパラメータにフィルター変数を割り当てるだけです:

_"ajax": {
     "url": "/getdata",
     "data": {
     "friend_name": $('#myselectid').val();
    }
} 
_

データをフィルタリングするには、select changeイベントでdraw()を呼び出すだけです

_$('#myselectid').change(function (e) {
        table.fnDraw();
});
_
1
markpsmith