15

私は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();


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

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

4

3 に答える 3

17

これを行う方法についての非常に良い説明は次のとおりです: 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();
});

ボタンをクリックして送信する場合は、をに変更し、.changeID.clickが HTML 内のボタンの ID を指していることを確認してください。

于 2017-03-07T14:50:37.147 に答える
0

基本検索の場合は、search() APIを使用する必要があります。

// Invoke basic search for 'a'
dt.search('a', false)

より複雑なクエリの場合、オープン API を介して ajax 呼び出しをインターセプトすることにより、searchBuilder バックエンドを利用できます。次に、searchBuilder の例をいくつか示します。

// Basic example: 
// . (searchable_fields contains 'a' 
//      AND (office = Tokyo AND Salary > 100000) 
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data){
    data['searchBuilder'] = {
        'criteria': [
            {'data': 'Office', 'origData': 'office', 'type': 'string'
                ,'condition': '='
                ,'value': ["Tokyo"], 'value1': "Tokyo" 
            }
            ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                ,'condition': '>'
                ,'value': [100000], 'value1': 100000 
            }
        ]
        ,'logic': 'AND'
    }
})

// Complex example:
// . (searchable_fields contains 'a'
//      AND (
//            (office = Tokyo AND Salary > 100000) 
//         OR (office = London AND Salary > 200000)
//      )
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data){
    data['searchBuilder'] = {
        'criteria': [
            {'criteria': [
                    {'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["Tokyo"], 'value1': "Tokyo"
                    }
                    ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [100000], 'value1': 100000 
                    }
                ]
                ,'logic': 'AND'
            }
            ,{'criteria': [
                    {'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["London"], 'value1': "London" 
                    }
                    ,{'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [200000], 'value1': 200000 
                    }
                ]
                ,'logic': 'AND'
            }
        ]
        ,'logic': 'OR'
    }
})

SearchBuilder ロジック タイプ:

=
!=
contains
starts
ends
<
<=
>
>=
between
null
!null

SearchBuilder データ値ブロック:

  • value: [<val>]常に等しいようですvalue1
  • value2value1: 下限となる'between' ロジックの上限の場合
于 2022-01-06T04:23:58.880 に答える