Hi all,
I’m developing a datatable which needs rows for general info and details for each row in a onclick row event. The idea is when you click on a row, I’ve got a JS onclick listening and firint an emit livewire for a specific action on my component.
The problem is, when clicking on a row, event is fired but row collapse and uncollapse. Here is my code:
(function ($) {
'use strict';
// Initialize a dataTable with collapsible rows to show more details
var initDetailedViewTable = function() {
var _format = function(d) {
// `d` is the original data object for the row
return '' +
'<tr class="row-details">' +
'Here I want row details composed by returned data from emit event' +
'</tr>';
};
var table = $('#detailedTable');
table.DataTable({
"sDom": "t",
"scrollCollapse": true,
"paging": true,
"bSort": true
});
// Add event listener for opening and closing details
$('#detailedTable tbody').on('click', '.data-row', function(d) {
var contId = this.getAttribute('data-contract-id');
window.livewire.emit('showServices', contId);
if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) {
$(this).removeClass('shown');
$(this).next().remove();
return;
}
var tr = $(this).closest('tr');
var row = table.DataTable().row(tr);
$(this).parents('tbody').find('.shown').removeClass('shown');
$(this).parents('tbody').find('.row-details').remove();
tr.addClass('shown');
tr.next().addClass('row-details');
});
table.dataTable();
};
initDetailedViewTable();
})(window.jQuery);