DataTables Group และ Sum

รวมกลุ่ม DataTables ให้แสดงผล ตัวอย่างจะเป็นการรวมกลุ่มตามวันที่

โดยที่ตอนแสดงจะแสดงผลแบบนี้ในตาราง

1. ID
2. วันที่สมัคร
3. Username/Email
4. Wallet Code

พอรวมกลุ่มแล้วมันก็จะทำการตัดคอลัมภ์ของ วันที่สมัคร ออกไปรวมด้านบนแทน

โดยโค้ดที่ใช้มี 2 ชุด คือแบบ แค่รวมกลุ่มธรรมดา และ รวมกลุ่มแบบนับจำนวนด้วยก็เลือกเอาเลยเนอะ

ตัวอย่างโค้ด HTML ของ DataTables

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Register Date</th>
            <th>Username/Email</th>
            <th>Wallet Code</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Register Date</th>
            <th>Username/Email</th>
            <th>Wallet Code</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>2019-01-20</td>
            <td>Username1</td>
            <td>Walletcode1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2019-01-21</td>
            <td>Username2</td>
            <td>Walletcode2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>2019-01-21</td>
            <td>Username3</td>
            <td>Walletcode3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>2019-01-21</td>
            <td>Username4</td>
            <td>Walletcode4</td>
        </tr>
    </tbody>                       
</table>

รวมกลุ่มธรรมดา

var groupColumn = 1;
var table = $('#datatables').DataTable({
    "columnDefs": [
        { "visible": false, "targets": groupColumn }
    ],
    "order": [[ groupColumn, 'desc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                let trTextTd = '<tr class="text-white bg-primary">';
                    trTextTd += '<td colspan="'+numTdColspan+'">'+ group +'</td>';
                    trTextTd += '<td></td>';
                    trTextTd += '</tr>';
                    $(rows).eq( i ).before(trTextTd);

                last = group;
            } 
        } );
    }
} );

รวมกลุ่มแบบนับจำนวน

var groupColumn = 1;
var table = $('#datatables').DataTable({
    "columnDefs": [
        { "visible": false, "targets": groupColumn }
    ],
    "order": [[ groupColumn, 'desc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        var lengthData = api.column().data().length-1; // นับจำนวนสูงสุดของข้อมูล
        var positionFirstOfGroup = null; // บันทึกตำแหน่งเริ่มแรกของกรุ๊ปวันที่
        var sumRows = 0;

        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {

                if(sumRows > 0 ) {
                    
                    // แปลว่าเป็นกรุ๊ปใหม่จริงๆ ให้ทำการ Insert ของเก่าที่นับจำนวนไว้ด้านบนตำแหน่งแรกที่บันทึกไว้ของกรุ๊ป
                    let trTextTd = '<tr class="text-white bg-primary">';
                    trTextTd += '<td colspan="'+numTdColspan+'">'+ last +' ('+ sumRows +')</td>';
                    trTextTd += '<td></td>';
                    trTextTd += '</tr>';
                    $(rows).eq( positionFirstOfGroup ).before(trTextTd);

                    trTextTd = '';
                    sumRows = 1;
                    // บันทึกตำแหน่งเริ่มแรกของกรุ๊ปวันที่
                    positionFirstOfGroup = i;
                } else {
                    // บันทึกตำแหน่งเริ่มแรกของกรุ๊ปวันที่
                    positionFirstOfGroup = i;
                }

                sumRows++;
            
                last = group;
            } else {
                // แปลว่ามีข้อมูล เป็นกรุ๊ปเดียวกัน
                sumRows++;
            }

            // เมื่อสิ้นสุดทุกแถวแล้วจะเข้าเงื่อนไขนี้ 
            if(lengthData == i)
            {
                // แปลว่าเป็นกรุ๊ปใหม่จริงๆ
                let trTextTd = '<tr class="text-white bg-primary">';
                    trTextTd += '<td colspan="'+numTdColspan+'">'+ last +' ('+ sumRows +')</td>';
                    trTextTd += '<td></td>';
                    trTextTd += '</tr>';
                $(rows).eq( positionFirstOfGroup ).before(trTextTd);
            }
        } );
    }
} );