datatables-给行分组

最新推荐文章于 2023-10-13 11:16:05 发布

ccddsdsdfsdf

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量1.7k

点赞数

分类专栏： jquery 文章标签： datatables

本文链接：https://blog.csdn.net/lh87270202/article/details/83038712

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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();
        }
    } );
} );