Question

我正在使用此处描述的分组方法Row Grouping

并且工作正常。

但是我现在希望能够通过更改选择选项来更改行分组的列。

现在我在论坛中发现了一个有以下解决方案的问题。

// Just redraw
function Redraw(ordered){
    $('#table1').dataTable().fnSettings().aoDrawCallback.push( {
        "fn": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(ordered).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
        } );
    $('#table1').DataTable().draw(false);
}

我传递的列id应该按表分组。这是我需要的一半，因为它现在在原始分组之上添加分组。

这是因为新函数被推送到aoDrawCallback而不是替换它吗？

我知道如何才能替换原始回调（并删除分组），然后使用新的回调函数进行绘制？

任何帮助表示赞赏！

Answer 1

好的发现 - 实际上很直接。

我找到了一个答案here，它引导我找到正确的方法。因此，在我的初始化代码中，绘制回调函数是通过全局变量（列的ID）传递给订单：

var table = $('#table1').DataTable( {
        data : data,
        scrollCollapse: true,
        paging:         false,
        "order": [[ groupCol, "desc" ]],
        "dom": '<"selector">frtip',
        "columnDefs": 
            [{ 
                className: "fa fa-plus-circle firstCol", 
                "targets": 0 ,
            },{ 
                className: "descriptionText", 
                "targets": [3,6,10,16] ,
            },{
                "targets": 0,
                "orderable":false,
                "defaultvalue":''
             },
             {
                "targets": [1,4,5,7,9,11,12,13,14,15,16,17,18,19,20,21],
                "visible": false,
                "searchable":true
            }],
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows().nodes();
            var last=null;

            api.column(groupCol).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td style="text-align:left" colspan="15">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
    } );

要更改此项，我只需在更改选择输入时更改全局变量，然后重绘表格。

    $('#grouping').on('change',function(){
    var table = $('#table1').DataTable();
        switch(this.value.toUpperCase()){
        case "TOOL":
            groupCol=1;
            break;
        case "COMP":
            groupCol=5;
            break;
        default:
            groupCol=1;
        }
        table.draw(groupCol);
})

所以我最初正在研究一种方法来将列ID硬编码到回调函数中并更改整个函数，而现在我使用的是一个变量，只是重绘它会触发回调函数！

jquery数据表通过选择

1 个答案: