datatables-給行分組

1、頁面

我直接拿的官網的例子，上面表格根據第二列位置這個字段分了組。

2、js

$(document).ready(function() {
    var groupColumn = 2;  //設置分組列爲第二例
    var table = $('#example').DataTable({
        "columnDefs": [
            { "visible": false, "targets": groupColumn }  
        ],
        "order": [[ groupColumn, 'asc' ]],
        "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 ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
 
    // Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
            table.order( [ groupColumn, 'desc' ] ).draw();
        }
        else {
            table.order( [ groupColumn, 'asc' ] ).draw();
        }
    } );
} );

3、參考官網

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