File
Add library
Share
Login or Register
Help
HTMLSaved
 
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
      </table>
        <table id="child" class="display" style="width:100%">
</table>
    </div>
  </body>
</html>
CSSSaved
 
    div.container { max-width: 1200px }
​
JavaScriptSaved
 
var table1;
    var dataSet = [
    {
        "paynum": "55.360",
        "invnum": "06396",
        "archnum": "55360_2021",
        "type": "Payment",
        "vendor": "GOOGLE LLC",
        "odate": "11.11.2021",
        "status": "Approved",
        "approver": "John Johnson",
        "finan": "Elon Musk",
        "total": "5.600.950",
        "curr": "USD",
        "atbpaid": "5.600.000",
        "author": "ivan ivanov",
        "invoices" : {
            "agrnum" : "K42344422112",
            "vensite" : "LV0152",
            "invoicenum" : "3417",
            "descrinv" : "Office rent",
            "invdate" : "09.11.2021",
            "amtbepaid" : "5.600.000",
            "payamount" : "6.000.000",
            "budget" : "YES",
            "checkcode" : "OK",
            "attachement" : {
                "invpdf" : "3417.pdf",
                "act" : "авр к 3417.pdf",
                "other" : "sf3417.pdf"
            },
            "ERPstatus" : "Paid"
        }
    },
    {
        "paynum": "56.360",
        "invnum": "06396",
        "archnum": "55360_2021",
        "type": "Payment",
        "vendor": "GOOGLE LLC",
        "odate": "11.11.2021",
        "status": "Approved",
        "approver": "John Johnson",
        "finan": "Elon Musk",
        "total": "5.600.950",
        "curr": "USD",
        "atbpaid": "5.600.000",
        "author": "ivan ivanov",
        "invoices" : {
            "agrnum" : "K42344422112",
            "vensite" : "LV0152",
            "invoicenum" : "3417",
            "descrinv" : "Office rent",
            "invdate" : "09.11.2021",
            "amtbepaid" : "5.600.000",
            "payamount" : "6.000.000",
            "budget" : "YES",
            "checkcode" : "OK",
            "attachement" : {
                "invpdf" : "3417.pdf",
                "act" : "авр к 3417.pdf",
                "other" : "sf3417.pdf"
            },
            "ERPstatus" : "Paid"
        }
    }
];
​
​
function format ( d ) {
    console.log('format function called');
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Invoice:</td>'+
            '<td>'+d.invoices.attachement.invpdf+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>act:</td>'+
            '<td>'+d.invoices.attachement.act+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Other:</td>'+
            '<td>'+d.invoices.attachement.other+'</td>'+
        '</tr>'+
    '</table>';
}
​
    
    $(document).ready(function() {
        var table = $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Payment number", data : 'paynum' },
            { title: "Invoice numbers", data : 'invnum' },
            { title: "Archive №", data : 'archnum' },
            { title: "Type.", data : 'type' },
            { title: "Vendor", data : 'vendor' },
            { title: "Date", data : 'odate' },
            { title: "Status", data : 'status' },
            { title: "Approver", data : 'approver' },
            { title: "Fin. analyst", data : 'finan' },
            { title: "Total", data : 'total' },
            { title: "Currency", data : 'curr' },
            { title: "Amount to be paid", data : 'atbpaid' },
            { title: "Author", data : 'author' }
        ]
    } );
    
​
​
​
​
        $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
​
    $('#example tbody').on('click', 'tr', function () {
        if (table1) {
            console.log('inside table1 if statement');
            table1.clear().destroy();    
        }
        var dataArr = [];
        data1 = table.row( this ).data();
        dataArr.push(data1);
        console.log( 'You clicked on '+ data1.paynum );
            table1 = $('#child').DataTable( {
                data: dataArr,
                "paging":   false,
                "ordering": false,
                "info":     false,
                "columns": [
                    {
                        "className":      'dt-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { title: "Agreement number", data : 'invoices.agrnum' },
                    { title: "Vendor site", data : 'invoices.vensite' },
                    { title: "Invoice number", data : 'invoices.invoicenum' },
                    { title: "Description invoice", data : 'invoices.descrinv' },
                    { title: "Invoice date", data : 'invoices.invdate' },
                    { title: "Amount to be paid", data : 'invoices.amtbepaid' },
                    { title: "Payment amount(PPR)", data : 'invoices.payamount' },
                    { title: "Budget", data : 'invoices.budget' },
                    { title: "Check code", data : 'invoices.checkcode' },
                    //{ title: "Attachement", data : 'invoices.attachement' },
                    { title: "ERP status", data : 'invoices.ERPstatus' }
                ]
            } );
        $('#child tbody')
        .off('click')
        .on('click', 'td.dt-control', function () {
            var tr = $(this).closest('tr');
            var row = table1.row( tr );
​
            if ( row.child.isShown() ) {
                console.log('close child');
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                console.log('open child');
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );
    } );            
} );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers