DataTables ajax.reload（）带参数 [英] DataTables ajax.reload() with parameters

问题描述

我正在Angular2项目中使用DataTables serverSide 。

I am using DataTables serverSide in an Angular2 project.

我正在尝试在进行更改后重新加载表，而这些更改想要通过AJAX将它们作为参数传递给POST。

I am trying to reload the table after making changes, and those changes I want to pass them as parameters in POST via AJAX.

事实是DataTables总是得到选项对象来自初始化，而不是具有新参数的更新版本。

The thing is that DataTables is always getting the options object from the initialization, and not an updated version with the new parameters.

所以，我需要是，使用 ajax.reload（）传递一组新的参数。

So, what I need is, to use ajax.reload() passing a new set of parameters.

这是我目前的功能：

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 ，这是因为我想显示一个干净版本的我的功能，我尝试了很多东西，没有任何工作。

At the moment, as you can see, I'm not using tableParams, this is because I wanted to show a clean version of my function, I tried many things and none of them worked.

DataTable始终使用初始参数初始化选项对象。

DataTables always gets the initial options object, with the initial parameters.

这是我绝望的尝试之一：

This is one of my desperate attempts:

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（）函数，能够发送更新的参数将解决问题。

Some help would be much appreciated. If you need further explanations on how the DataTable is created, or more code snippets let me know. But I think that the issue is just with the ajax.reload() function, being able to send updated parameters will solve the issue.

非常感谢！

修改1

是我的init 选项对象：

This is my init options object:

            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发送的参数：

And these are the parameters that DataTables is sending:

（其他DataTables参数）

当我调用 ajax.reload（）时，无论我尝试了什么，我最终都会发送这些相同的参数，因此发送init参数。

When I call ajax.reload(), no matter the things I have tried, I end up sending these same parameters, therefore, sending the init parameters.

推荐答案

我终于得到了解决方案，问题是我太专注于通过实现我的目标DataTable（）。ajax.reload（）。我想通过某种方式传递参数，这是不正确的。

I finally got the solution, the problem was that I was too focused on achieving my goal through DataTable().ajax.reload(). I wanted to pass the parameters through there in one way or another, and that was incorrect.

我不得不更改选项的构造对象。
如前所述，我将我的自定义参数分配给选项对象，如下所示：

I had to change the construction of the options object. As you saw earlier, I was assigning my custom parameters to the options object like this:

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

其中数据：this.params 将从某个地方获取数据，在我的情况下，我有2个监听器，一个用于 init ，另一个用于更新更改 this.params 值。这个，而不是一个监听器可以是一个 onChange（），但是重点是参数在运行时更改。

Where data: this.params would get the data from somewhere, in my case, I had 2 listeners, one for init and another for updating that change this.params value. This, instead of a listener could be an onChange(), but the point is that the parameters change at runtime.

所以我只需把它放入一个函数中，并将DataTable的参数合并到我自己的参数中。

So I simply had to put this into a function, and merge DataTable's parameters to my own parameters.

这是我的解决方案：

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

使用这个选项对象，当我必须刷新DataTable向服务器发送新参数时，我只需调用 ajax.reload（）。 DataTables将获得选项对象与最新的数据并重新加载。

With this options object, when I have to refresh the DataTable sending new parameters to the server, I simply call ajax.reload(). DataTables will get the options object with the latest data and reload itself.

我真的希望这可以帮助别人！良好的工作和快乐的编码！

I really hope this can help someone! Good work and happy coding!

这篇关于DataTables ajax.reload（）带参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！