Tengo varias tablas (tbUser, tbRole, tbJob) y quiero simplificar mi código.
esto es lo que hice antes:
var userTable = $('#tbUser').DataTable(); var roleTable = $('#tbRole').DataTable(); var jobTable = $('#tbJob').DataTable(); Cada tabla tiene diferentes opciones, columnas y tiene una cosa en común tiene la columna [acción] para poner el botón Ver/Editar/Eliminar. ¿Hay una manera simple de hacer clic en el botón de acción del evento jquery en cada tabla?
Este es mi código:
$('#tbUser tbody').on('click', '#btn_edit', function (e) { let index = $(this).parents('tr'); let data = userTable.row(index).data(); /** Something */ }); /** REPEAT EACH TABLE */y he probado:
$('table tbody').on('click', '#btn_edit', function (e) { let index = $(this).parents('tr'); let data = userTable.row(index).data(); //===> But how to change table dynamicly on this line /** Something */ });En primer lugar, su botón de edición debe orientarse utilizando una clase, no una ID; de lo contrario, solo encontrará el primer botón.
Cree un objeto que contenga una referencia a cada una de sus tablas. Estoy usando la identificación de la tabla como clave y la tabla de datos instanciada como valor.
const tables = { tbUser: userTable, tbRole: roleTable, tbJob: jobTable }Luego, con el clic de su botón, identifique de qué tabla forma parte y utilícelo para obtener la creación de instancias de la tabla del objeto que creó anteriormente.
$('table tbody').on('click', '.btn_edit', function (e) { const tableId = this.closest('table').id; const datatable = tables[tableId]; const index = $(this).parents('tr'); const data = datatable.row(index).data(); /** Something */ });