finanzen/public/js/tables.js

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 deleteId(id, table) {
    if (table == "scheduled")
        cmnd = "deleteScheduled";
    else
        cmnd = "deleteBill";
    $.ajax({
        type: "POST",
        url: "/Ajax/"+cmnd+"/"+id,
        data: {"id" : id}, // serializes the form's elements.
        success: function(data){
            var ph = document.getElementById('alertbox');
            alert(ph,"erfolgreich gelöscht",'success');
            $('#'+table).DataTable().ajax.reload();
        },
        error: function(data){
            var ph = document.getElementById('alertbox');
            alert(ph,"Fehler beim löschen",'danger');
            $('#'+table).DataTable().ajax.reload();
        }
    });
    
}

function formatDetails ( d ) {
    details = '';
    str='';
    // `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(element, table){
    var tr = element.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).ready(function(){
    var myModal = document.getElementById('mymodal');
    const modal = new bootstrap.Modal(myModal);
    $("#modal_ok").click(function (e) {
        modal.hide();
        deleteId(myModal.getAttribute('data-bs-id'), myModal.getAttribute('data-bs-table'));
    });
    myModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        table = button.closest('table').id; // table row ID 
         var id = button.getAttribute('data-bs-id');
        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;
    });

});