来自按钮点击的数据表动态网址

如何解决来自按钮点击的数据表动态网址

我是 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 列并再次加载它们。