以下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
}