带参数的DataTables ajax.reload()

时间:2017-02-23 10:18:59

标签: javascript ajax angular typescript datatables

我在Angular2项目中使用DataTables serverSide

我正在尝试在进行更改后重新加载表,并且我希望通过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对象

这是我绝望的尝试之一:

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

这是我的初始options对象:

            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参数。

3 个答案:

答案 0 :(得分:11)

我终于得到了解决方案,问题是我过于专注于通过options实现我的目标。我想以某种方式传递参数,这是不正确的。

我不得不改变options对象的构造。 如前所述,我正在将我的自定义参数分配给ajax: { url: this.jsonApiService.buildURL('/test_getUsers.php'), type: 'POST', data: this.params, } 对象,如下所示:

data: this.params

this.params将从某处获取数据,在我的情况下,我有2个侦听器,一个用于 init ,另一个用于更新更改{{ 1}}价值。这可以是onChange()而不是听众,但关键是参数在运行时发生变化

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

这是我的解决方案:

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

使用此options对象,当我必须刷新DataTable向服务器发送新参数时,我只需调用ajax.reload()。 DataTables将获取具有最新options的{​​{1}}对象并重新加载。

我真的希望这可以帮助别人!干得好,编码愉快!

答案 1 :(得分:2)

query_params = [
  {
    'name': 'field',
    'parameterType': {'type': 'STRING'},
    'parameterValue': {'value': field}
  }
]

然后只需调用:

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

答案 2 :(得分:0)

在某些情况下,您可能希望在运行时更改ajax网址或应用任何其他查询参数。

所以您可以这样做:

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

它与库的v1.10.16版本一起使用。