DataTables ajax.reload() 带参数

Posted 2023-05-07

【中文标题】DataTables ajax.reload() 带参数

【英文标题】：DataTables ajax.reload() with parameters

【发布时间】：2017-07-13 18:18:37

【问题描述】：

我在 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 的进一步说明，或者更多代码 sn-ps 让我知道。但我认为问题在于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 发送的参数：

（在其他 DataTables 参数中）

当我调用ajax.reload() 时，无论我尝试过什么，我最终都会发送这些相同的参数，因此发送初始化参数。

【参考方案1】：

我终于找到了解决方案，问题是我太专注于通过DataTable().ajax.reload() 实现我的目标。我想以一种或另一种方式传递参数，这是不正确的。

我不得不更改options 对象的构造。 如您之前所见，我将 我的自定义参数 分配给 options 对象，如下所示：

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

data: this.params 会从某个地方获取数据，在我的情况下，我有 2 个侦听器，一个用于 init，另一个用于 updating 更改 this.params 值.这可能是onChange()，而不是侦听器，但关键是参数在运行时发生变化。

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

这是我的解决方案：

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

有了这个options 对象，当我必须刷新向服务器发送新参数的DataTable 时，我只需调用ajax.reload()。 DataTables 将使用最新的data 获取options 对象并重新加载自身。

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

【参考方案2】：

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

所以你可以这样做：

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

它适用于 v1.10.16 版本的库。

【参考方案3】：

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

然后只需调用：

table.ajax.reload();

【讨论】：

这是最好的解决方案！