datatables-给行分组

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lh87270202/article/details/83038712

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

猜你喜欢

转载自blog.csdn.net/lh87270202/article/details/83038712