单击按钮后的数据表动态 URL

Question

我是 JavaScript 的新手，虽然我发现很多关于这个主题的问题..我想我需要更完整的 example/explanation。

在单独的 js 文件中使用 ASP.NET 核心和数据 table。 Datatable 加载正常，但现在我已经在我的视图中添加了几个按钮，并且在单击时我想对数据应用过滤器。在控制器中的 AP CALL 中，我有一个 SWITCH 语句来捕获过滤器参数和 return 过滤后的 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：对于table

function loadDataTable() {
dataTable = $('#datatables-reponsive').DataTable({
    responsive: true,
    "ajax": {
        
        "url": "/Customer/Invoice/GetAll",  
    },
    "columnDefs": [{......

onClicks 重新加载 table 但没有过滤器的原始数据被传递给 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 .......

Answer 1

我认为问题在于，当您重新加载数据并将其重新发送到 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 的列并重新加载它们。

单击按钮后的数据表动态 URL

Datatables Dynamic URL from button click

javascript

datatables