问题描述
我是 JavaScript 的新手,虽然我发现很多关于这个主题的问题..我想我需要更完整的例子/解释。
在单独的 js 文件中使用 ASP.NET Core 和数据表。 数据表加载得很好,但现在我在视图中添加了几个按钮,单击时我想对数据应用过滤器。在控制器中的 AP CALL 中,我有一个 SWITCH 语句来捕获过滤器参数并返回过滤后的 JSON。
查看:
<input id="btnopen" type="submit" value="Open" />
<input id="btnTraded" type="submit" value="Traded" />
<input id="btnClosed" type="submit" value="Closed" />
<input id="btnAll" type="submit" value="All" />
控制器:
#region API CALLS
[HttpGet]
public IActionResult GetAll(string filter)
{
switch (filter)
{
case "Traded":
...
JS:每个按钮都有 .onClick(当然有更好的方法)
(function () {
$("#btnopen").click(function () {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Open").load;
});});
(function () {
$("#btnTraded").click(function () {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Traded").load;
});
});
JS:用于表格
function loadDataTable() {
dataTable = $('#datatables-reponsive').DataTable({
responsive: true,"ajax": {
"url": "/Customer/Invoice/GetAll",},"columnDefs": [{......
onClicks 重新加载表格,但没有过滤器的原始数据被传递给 API 调用。
更新: 问题是我应该将 OnLoad() 作为函数调用。 按钮 OnClick 功能也存在一些问题,尽管页面确实刷新了,但从未触发过。所以我把它改成如下: 查看:
<input onclick="filter('open');" value="Open" />
JS:
function filter(data) {
if (data == "Traded") {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Traded").load();
}
else if (data == "open") {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Open").load();
}
else if .......
解决方法
我认为问题在于当您重新加载数据并将其重新发送到 DataTable
时,您不会在 ajax
块中再次加载它们。我的解决方案是首先更改您触发数据表 ajax 的方式:
(function () {
$("#btnOpen").click(function () {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Open").load();
});});
(function () {
$("#btnTraded").click(function () {
dataTable.ajax.url("/Customer/Invoice/GetAll?filter=Traded").load();
});
与 ajax url 相关的 load()
应该作为函数调用。然后:
dataTable = $('#datatables-reponsive').DataTable({
responsive: true,"ajax": {
"url": "/Customer/Invoice/GetAll","method" : "GET","data" : function (data) {
delete data.columns;
}
},"columnDefs": [{......
"data"
函数将销毁您的 DataTable
列并再次加载它们。