finanzen/public/js/tables.js

const renderAmount = function(data, _cell, _dataIndex, _cellIndex) {
    var ret = (Number(data)<0)?'<span style="color:red;">':'<span>';
    ret += new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(data);
    ret += '</span>';
    return ret;
}


var colBetrag = {   
            title: "Betrag", 
            orderable:false,
            data: "amount",
            className:"dt-amount",  
            render: function ( data, type, row ) {
                var ret = (Number(data)<0)?'<span style="color:red;">':'<span>';
                ret += new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(data);
                ret += '</span>';
                return ret;
                } 
};

var columns = [
    {
        title:"",
        data:'id',
        className:"dt-id",
        orderable:false,
        render: function ( data, type, row ) {
            if ( type === 'display')
                return '<a class=""  data-bs-toggle="modal" data-bs-id="'+data+'" data-bs-target="#mymodal"><i class="fa fa-trash"></i></a>';
        return data;
        }
    },
    {   title: "Datum", 
        data: "datum", 
        type: 'int',
        className:"dt-datum",
        orderable:true, 
        render: function ( data, type, row ) {
            if (type === 'sort'){
                const [day, month, year] = data.split('.');
                const date2 = new Date(+year, month - 1, +day);
                return date2.getTime();
            }
            return data;
            } 
    },
    { title: "Empfänger",orderable:false, data: "receiver",className:"dt-receiver" },
    colBetrag
  ];

function alert(alertPlaceholder, message, type) {
    var wrapper = document.createElement('div');
    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
    alertPlaceholder.append(wrapper);
}

function formatDetails ( d ) {
    details = '';
    str='';
    if (d.rechnung)
        str += '<a href="viewBill/'+d.rechnung+'">Rechnung: '+d.rechnung+'</a>';
    // `d` is the original data object for the row
    d.details.forEach(function(item){
        details += '<tr>';
        details += '<td>'+item.comment+'</td>';        
        details += '<td class="dt-amount">'+item.description+'</td>';
        details += '<td class="dt-amount';
        details += (Number(item.subamount)<0) ? ' text-danger' : ''; 
        details += '">'+new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.subamount);+'</td>';
        details += '</tr>';
      });
    if (typeof d.quelle !== 'undefined'){
        str +='<table class="tabdet" data-bs-id="'+d.id+'">'+
        '<tr>'+
            '<td>Quelle:</td>'+
            '<td>'+d.quelle+'</td>'+
        '</tr></table>';
    }
    str += '<table class="table table-striped tabdet" width="100%" data-bs-id="'+d.id+'">'+
        details +
    '</table>';
    return str;
}

//   $('#example').DataTable( {
//     columns: $.extend( true, columns, [
//        { title: 'xx' },
//        null
//      ] )
//   } );
function collapseDetails(e,index){
    console.log(e,index);

    var tr = e.closest('tr');
    // var row = table.row( tr );

    // if ( row.child.isShown() ) {
    //     // This row is already open - close it
    //     row.child.hide();
    //     tr.removeClass('shown');
    // }
    // else {
    //     // Open this row
    //     row.child( formatDetails(row.data()) ).show();
    //     tr.addClass('shown');
    // }
}

function getId(ele, table) {
    var tr = ele.closest('tr');
    var row = table.row( tr );
    return row.data().id;
}

document.addEventListener("DOMContentLoaded", function(event) {
    var myModal = document.getElementById('mymodal');
    var myModalDelete = document.getElementById('mymodalDelete');

    myModalDelete.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-bs-id');
        let tab = button.closest('table').id; // table row ID 
        myModalDelete.setAttribute('data-bs-id',id);
        myModalDelete.setAttribute('data-bs-table',tab);
        var modalTitle = myModalDelete.querySelector('.modal-title');
        modalTitle.textContent = 'Lösche Eintrag Nr. ' + id;
    });

    myModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-bs-id');
        let table = button.getAttribute('data-bs-table');
        myModal.setAttribute('data-bs-id',id);
        myModal.setAttribute('data-bs-table',table);
        var modalTitle = myModal.querySelector('.modal-title');
        modalTitle.textContent = 'Lösche Eintrag Nr. ' + id;
    });
    document.getElementById('modal_delete').addEventListener('click', deleteEntry );
});