Tengo una columna en mi tabla de datos de jQuery que muestra un enlace de marca de verificación verde si data == true o una X roja si data == false:
{ data: "HasPayment", render: function (data, type, row) { var paymentSet = '@Url.Action("Set", "Payment")?applicationId=' + row.Id + '&year=' + row.Year + '&month=' + row.Month + '&hasPayment=' + data; if (data) { return '<a href=\"' + paymentSet + '\" class="fas fa-solid fa-check" style="color: green"></a>'; } return '<a href=\"' + paymentSet + '\" class="fas fa-solid fa-times" style="color: red"></a>'; } }, El problema es que cuando hago clic en uno de los enlaces (ya sea una marca de verificación verde o una X roja), navega a otra página. Sé que esto se debe a que estoy usando href y Url.Action .
Cuando un usuario hace clic en uno de los enlaces, quiero llamar al método /Payment/Set para actualizar los datos (marca de verificación verde a X roja y viceversa) y luego quiero volver a dibujar mi tabla de datos (es decir dataTable.draw() ) sin navegando desde la página actual (es decir, vista de índice). /Payment/Set method actualiza los datos sin devolver nada (es decir, anulado).
Actualización : probé lo siguiente y casi funciona, lo que significa que cuando hago clic en uno de los enlaces, los datos se actualizan y la tabla de datos se actualiza, excepto que todavía intenta navegar a otra página.
{ data: "HasPayment", render: function (data, type, row) { var paymentSet = '@Url.Action("Set", "Payment")?applicationId=' + row.Id + '&year=' + row.Year + '&month=' + row.Month + '&hasPayment=' + data; if (data) { return '<a href=\"' + paymentSet + '\" onclick="return onclickFunction()" class="fas fa-solid fa-check" style="color: green"></a>'; } return '<a href=\"' + paymentSet + '\" onclick="return onclickFunction()" class="fas fa-solid fa-times" style="color: red"></a>'; } }, <script> function onclickFunction() { $.ajax({ type: "GET", url: $(this).attr("href"), success: function () { paymentDataTable.ajax.reload(); } }); } </script>Si usa un ancla <a> , es obvio que el navegador navegará a otra página. Ese es el propósito real de la etiqueta de anclaje.
Debe usar una función AJAX para llamar cuando se presiona su botón y en la devolución de llamada llamar a la recarga de la mesa.
Esta puede ser una manera:
{ data: "HasPayment", render: function (data, type, row) { if (data) { return '<button class="fas fa-solid fa-check" style="color: green" onclick="setPayment(row.Id, row.Year, row.Month, data)"></button>'; } return '<button class="fas fa-solid fa-times" style="color: red" onclick="doSomethingElseMaybe()"></button>'; } }Luego, debe crear dos funciones más, una con la llamada AJAX y otra con la recarga de la tabla para llamarla como devolución de llamada.
function setPayment(id, month, year, data){ var url = `Payment/Set?applicationId=${id}&year=${year}&month=${month}&hasPayment=${data}`; $.ajax({ type: "POST", //OR GET? it depends on your backend url: url, contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { reloadTable(); }, error: () => { console.error("500 Internal Server Error.");} }); }Luego, en la función reloadTable simplemente llame al método ajax.reload() de la API de DataTable.
por ejemplo
function reloadTable(){ datatable.ajax.reload(); }Aquí está la documentación del método de recarga de DataTables.
Aquí está la documentación de JQuery AJAX.
Es posible que deba adaptar el código de ejemplo a su propósito específico de backend.