web-dev-qa-db-ja.com

DataTables ajax.reload（）とパラメーター

Angular2プロジェクトでDataTablesserverSideを使用しています。

変更を加えた後にテーブルをリロードしようとしていますが、それらの変更をAJAX経由でPOST）のパラメーターとして渡したいと思います。

重要なのは、DataTablesは常に初期化からoptionsオブジェクトを取得しており、新しいパラメーターで更新されたバージョンではないということです。

したがって、必要なのは、ajax.reload()を使用して新しいパラメーターのセットを渡すことです。

これは私の現在の機能です：

_filterData(tableParams) {
    console.log('reloading DT. tableparams received are: ' + JSON.stringify(tableParams));

    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');
    table.DataTable().ajax.reload();
}
_

ご覧のとおり、現時点ではtableParamsを使用していません。これは、関数のクリーンバージョンを表示したかったためです。多くのことを試しましたが、どれも機能しませんでした。

DataTablesは、常に初期パラメーターを使用して、初期optionsオブジェクトを取得します。

これは私の必死の試みの1つです：

_filterData(tableParams) {
    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');
    table.DataTable({
        ajax: {
            url: this.jsonApiService.buildURL('/test_getUsers.php'),
            type: 'POST',
            data: tableParams,
        },
    }).ajax.reload();
}
_

いくつかの助けをいただければ幸いです。 DataTableの作成方法についてさらに説明が必要な場合、またはコードスニペットがさらに必要な場合はお知らせください。しかし、問題はajax.reload()関数だけにあると思います。更新されたパラメーターを送信できると、問題は解決します。

どうもありがとう！

編集1

これは私のinitoptionsオブジェクトです：

_            let data = {
                email: true,
                test: 'init',
            };

            this.options = {
                dom: 'Bfrtip',
                processing: true,
                serverSide: true,
                pageLength: 20,
                searchDelay: 1200,
                ajax: {
                    url: this.jsonApiService.buildURL('/test_getUsers.php'),
                    type: 'POST',
                    data: data,
                },
                columns: [
                    {data: 'userId'},
                    {data: 'userCode'},
                    {data: 'userName'},
                    {data: 'userRole'},
                    {data: 'userEmail'},
                ],
            };
_

そして、これらはDataTablesが送信しているパラメーターです。

enter image description here

（他のDataTablesパラメーターの中で）

ajax.reload()を呼び出すと、何を試しても、同じパラメーターを送信することになり、initパラメーターを送信します。

javascriptajaxangulartypescriptdatatables
4
SrAxi

私はついに解決策を得ました。問題は、DataTable().ajax.reload()を介して目標を達成することに集中しすぎていたことです。何らかの方法でパラメータをそこに渡したかったのですが、それは正しくありませんでした。

optionsオブジェクトの構造を変更する必要がありました。前に見たように、私は私のカスタムパラメータを次のようにoptionsオブジェクトに割り当てていました。

_ajax: {
  url: this.jsonApiService.buildURL('/test_getUsers.php'),
  type: 'POST',
  data: this.params,
}
_

_data: this.params_がどこかからデータを取得する場所、私の場合、2つのリスナーがありました。1つはinit用で、もう1つはpdating用で、_this.params_を変更します。値。これは、リスナーの代わりにonChange()である可能性がありますが、要点はパラメーターが実行時に変更されることです。

そのため、これを関数に入れて、DataTableのパラメーターを自分のパラメーターにマージするだけで済みました。

これは私の解決策です：

_data: function (d) {
    Object.assign(d, myClass.params);
    return d;
}
_

このoptionsオブジェクトを使用して、サーバーに新しいパラメーターを送信するDataTableを更新する必要がある場合は、単にajax.reload()を呼び出します。 DataTablesは、最新のoptionsを持つdataオブジェクトを取得し、それ自体をリロードします。

これが誰かを助けることができることを本当に願っています！良い仕事と幸せなコーディング！

10
SrAxi
$('#example').dataTable({
  "ajax": {
    "url": "data.json",
    "data": function (d) {
        d.extra_search = $('#extra').val();
    }
  }
});

次に、単に呼び出します：

table.ajax.reload();
2
Ilker Burak

場合によっては、実行時にajax URLを変更したり、追加のクエリパラメータを適用したりすることができます。

だからあなたはこのようにすることができます：

var dataTable = $('#example').DataTable({...});    
dataTable.ajax.url('/new-ajax-url?someParam=1').load();

ライブラリのバージョンv1.10.16で動作します。

0
Akmal