我在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发送的参数:
(在其他DataTables参数中)
当我呼叫ajax.reload()
时,无论我尝试过什么,我最终都会发送这些相同的参数,因此,发送init参数。
答案 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版本一起使用。