“JQuery DataTables”合並相同行數據“rowspan”

Question

我是 jQuery 新手。 在我的情況下，我想使用 jQuery 行跨相同的數據。 我希望我的桌子看起來像這樣

這是我的代碼：

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>

我的桌子現在看起來像這樣。 誰能幫我...

謝謝之前

Answer 1

嘗試這個

https://datatables.net/examples/advanced_init/footer_callback.html

使用footer callback函數