รวมกลุ่ม DataTables ให้แสดงผล ตัวอย่างจะเป็นการรวมกลุ่มตามวันที่
โดยที่ตอนแสดงจะแสดงผลแบบนี้ในตาราง
- ID
- วันที่สมัคร
- Username/Email
- 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); } } ); } } );