以下JavaScript在jQuery datatable列中呈现绿色复选标记按钮或红色X按钮:

{
    data: "HasPayment",
    render: function (data, type, row, meta) {
        if (data) {
            return '<button class="hasPayment\ btn btn-link" id=n-"' + meta.row + '"><span class="fas fa-solid fa-check" style="color: green"></span></button>';
        }
        return '<button class="hasPayment\ btn btn-link" id=n-"' + meta.row + '"><span class="fas fa-solid fa-times" style="color: red"></span></button>';
    }
}

单击其中一个按钮(绿色复选标记或红色X)时,将调用以下JavaScript:

$('#HR_Payment_DataTable tbody').on('click', '.hasPayment', function () {
    var id = $(this).attr("id").match(/\d+/)[0];
    var data = $('#HR_Payment_DataTable').DataTable().row(id).data();
    var url = `Payment/Set?applicationId=${data[14]}&year=${data[12]}&month=${data[13]}&hasPayment=${data[11]}`;
    $.ajax({
        url: url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            dataTable.ajax.reload();
        },
        error: () => {
            console.error("500 Internal Server Error.");
        }
    });
});

当我单击其中一个按钮时,我得到一个控制台错误,即url中的值未定义.

我遵循这个例子:http://live.datatables.net/qemodapi/975/edit

这就是一排的样子

{
    ActivityPhase: "Complete"
    ActivityPhaseDate: "/Date(219999600000)/"
    Address: "123 N Main"
    AppNumber: 54
    Client: "Bob Ben"
    EscrowAccountNumber: "123456"
    EscrowWithCity: true
    HasPayment: false
    Hrdbid: null
    Id: "a21d627e-97ab-477f-afc1-27c2637f7c05"
    Month: 6
    Notes: null
    Year: 2022
}

推荐答案

由于数据作为对象数组传递到DataTable中,因此每行中的数据将表示为对象而不是array.因此,您应该访问任何对象访问方法的行成员(每列的数据),而不是数组的成员.

更改此行

var url = `Payment/Set?applicationId=${data[14]}&year=${data[12]}&month=${data[13]}&hasPayment=${data[11]}`;

到这个

var url = `Payment/Set?applicationId=${data['AppNumber']}&year=${data['Year']}&month=${data['Month']}&hasPayment=${data['HasPayment']}`;

Javascript相关问答推荐

禁用从vue.js 2中的循环创建的表的最后td的按钮

TypeScript索引签名模板限制

如何粗体匹配的字母时输入搜索框使用javascript?

Google maps API通过API返回ZERO_RESULTS,以获得方向请求,但适用于Google maps

如何将Cookie从服务器发送到用户浏览器

如何将react—flanet map添加到remixjs应用程序

覆盖TypeScrip中的Lit-Element子类的属性类型

用JS从平面文件构建树形 struct 的JSON

为什么我的getAsFile()方法返回空?

检索相加到点的子项

Reaction-SWR-无更新组件

将基元传递给THEN处理程序

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

MongoDB中的嵌套搜索

我怎样才能得到一个数组的名字在另一个数组?

select 2-删除js插入的项目将其保留为选项

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

如何处理不带参数的redux thunk payloadCreator回调函数?

如何为两条动态路由创建一个页面?