jquery 数据表:使用行分组,我如何获得每个分组行的计数?

bmvo0sr5  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(103)

我正在使用数据表创建一个按数据分组的网格。我可以使用第一列对表进行分组。
我想得到每个分组行的计数,并写出分组行的计数,我该怎么做呢?
如果你看到下面的链接,他们有阴影分组行。我希望计数显示在分组文本的文本之后。
http://www.datatables.net/examples/advanced_init/row_grouping.html
谢谢

slwdgvem

slwdgvem1#

这可以通过在drawCallBack函数中添加for循环来实现。有关drawCallBack函数,请参考http://www.datatables.net/examples/advanced_init/row_grouping.html。请注意,我使用的是旧的dataTable函数,即fnDrawCallBack,用最新的等效函数替换它。

fnDrawCallback: function(settings) {
            var api = this.api();
            var rows = api.rows({ page: "current" }).nodes();
            var last = null;
            var storedIndexArray = [];
            api.column(0, { page: "current" })
                .data()
                .each((group, i) => {
                    if (last !== group) {
                        storedIndexArray.push(i);
                        $(rows)
                            .eq(i)
                            .before(
                                '<tr class="group"><td colspan="4">' +
                                    group +
                                    "<span class='group-count'></span></td></tr>"
                            );
                        last = group;
                    }
                });
            storedIndexArray.push(
                api.column(0, { page: "current" }).data().length
            );
            for (let i = 0; i < storedIndexArray.length - 1; i++) {
                let element = $(".group-count")[i];
                $(element).text(
                    storedIndexArray[i + 1] - storedIndexArray[i]
                );
            }
        }
js5cn81o

js5cn81o2#

function CountRows(){
    debugger;
    var abc = $('.abc');
    var arr = [];

    $( abc ).each(function( index, value ) {
        var dynamicId = (this.id.split('_')[1]); 
        var groupRowCount = $('.group_'+dynamicId).length;
        this.textContent = this.textContent + " (" + groupRowCount + ")"
    });

}
zour9fqk

zour9fqk3#

你可以通过rowGroup属性来实现:

rowGroup: {dataSrc: 'Your column name or index',
        startRender: function (rows, group) {
            return group + ' (' + rows.count() + ' rows)';
        }
    }
nr9pn0ug

nr9pn0ug4#

试试这个代码…

rowGroup: {
        endRender: function ( rows, group ) {
            var avg = rows
              .rows()
              .data()
              .filter( function ( data, index ) {
                return data[ 'group_name' ] == group ? true : false;
              } )
              .count();

            return '<div width="100%" align="left" style="font-size : 14px; background-color: orangered; color: white; padding-right: 15px;"><strong>Rows of  '+group+': '+
                $.fn.dataTable.render.number(',', '.', 0, '').display( avg ) + '</strong></div>';
        },
        dataSrc: "group_name"
    },
btqmn9zl

btqmn9zl5#

使用你链接的例子,注意我的评论与//:

"drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {

        //Create vars with each element you want to sum here

            if ( last !== group ) {
                $(rows).eq( i ).before(
                    //Get row data here, sum it in vars to display
                    '<tr class="sum group"><td>'+SumCol1+'</td><td>'+SumCol2+'</td>
                    //End sum row
                    '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                );

                last = group;
                //Don't forget to clear your sum vars at the end of each loop!
            }
        } );
    }

相关问题