"JQuery DataTables" Merge Same Row Data "rowspan"

I'm new in jQuery. I want to rowspan the same data using jQuery in my case. I want my table look like this

Here's my code:

JS

$.ajax({
    url: baseUrl + "api_dashboard/get_invest",
    dataType: 'JSON',
    type: "GET",
    success: function (res) {
        $("#nowdate").html(data[0].DATE);
        $('#table-invest tbody').empty();
        $.each(data, function (key, val) {
            var html = "<tr>" +
                "<td>" + val.DATE_PAYMENT + "</td>" +
                "<td>" + val.TYPE + "</td>" +
                "<td align='right'>" + accounting.formatNumber(val.USD,2,".",",") + "</td>" +
                "<td align='right'>" + accounting.formatNumber(val.EUR,2,".",",") + "</td>" +
                "</tr>";
            $('#table-invest tbody').append(html)

        });

        var total = "<tr style='background-color:#67a2d8;color: white'>" +
            "<td colspan='2' align='center'>TOTAL</td>" +
            "<td align='right'>" + accounting.formatNumber(res.OUT_TOTAL_SELURUH[0].TOTAL_SELURUH_USD,2,".",",") + "</td>" +
            "<td align='right'>" + accounting.formatNumber(res.OUT_TOTAL_SELURUH[0].TOTAL_SELURUH_EUR,2,".",",") + "</td>" +
            "</tr>";

        $('#table-invest tbody').append(total);
     hideLoadingCss()
    }
});

HTML

<div class="view-table" >
    <table id="table-invest" class="table table-bordered">
        <thead>
        <tr>
            <th style="background-color: #F4D35E" width="100%" colspan="8">PAYMENT - INVEST/OPERATION</th>
        <tr>
            <th style="background-color: #67a2d8">DATE</th>
            <th style="background: #67a2d8">TYPE OF PAYMENT</th>
            <th style="background: #67a2d8">USD</th>
            <th style="background: #67a2d8">EUR</th>
        </tr>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

My table now look like this. Can anyone help me...

Thank's before