jquery - 如何在具有相同数据的数据表中隐藏重复的单元格数据？

Question

[![更多图像已经使用 DEPARTMENT 的行摸索][1]][1][![image][2]][2]

在我附加的图像中，我使用 Datatables（ajax 调用）显示数据。有些行具有完全相同的 Class ID、Class#、Section 和 Title。如果有相同的数据，如何只在一行中显示重复数据？谢谢！下面是通过 ajax 使用数据表的代码

   ' var groupColumn = 0;
        var classListTable = $("#classListTable").DataTable({
            //"columnDefs": [
            //    { "visible": false, "targets": groupColumn }
            //],
            paging: true,
            fixedHeader: {
                header: true,
                headerOffset: -7

            },
            "order": [[groupColumn, 'asc'], [5, 'asc'],[4, 'asc']],
            //below is for group by department
            
            "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 maroon text-center font-weight-bold lead"><td colspan="100">' + group + '</td></tr>'

                        );

                        last = group;
                    }
                });
                
            },
            ajax: {
                url: '@Url.Content("~/api/LEGACY_CLASSLIST_CURRENT/GetLEGACY_CLASSLIST_CURRENT")?yt='+@currentYt,
                dataSrc: "",
                    "deferRender": true
            },
            "bDestroy": true,
            // be able to load new data for the table
            "lengthMenu": [[-1,25, 50, 100], ["ALL",25, 50, 100 ]],
           
            columns: [
                { data: "DEPARTMENT", visible: false },
                { data: "YRTR_DESC", visible: false},
              
                {data: "COU_ID"},
                {
                    data: "CLASS_NBR",
                    render: function (data, type, row) {
                        return '<a href="' + row.LEGACY_URL + '" target="_blank">' + data + '</a>';
                    }},
                { data: "SECTION" },
                { data: "TITLE" },
                { data: "CREDITS" },
                { data: "ENROLLED" },
                { data: "MAX_SIZE" },
                { data: "MEETING_DATES", className: "text-nowrap" },
                { data: "DAYS" },
                { data: "TIME" },
                { data: "BLDG_CODE" },
                { data: "ROOM_NBR" },
                { data: "CAMPUS", visible: true },
                { data: "INSTRUCTOR" },
                {
                    data: "SPL_MSG_AGGR",
                    render: function (data, type, row) {
                        if (data != null) {
                            return '<button tabindex="0" class="btn btn-sm btn-secondary js-message text-success" data-toggle="popover" data-message="' + data + '">View</button>';

                        }
                        else { return "<span class=''><span>"; }
                    }
                },
                { data: "LEGACY_URL", visible:false }
            ],
            initComplete: function () {
                //test
                //this.api().columns([5]).every(function () {
                //    var column = this;
                //    column.data().each(function (d, j) {

                //    });
                   
                //});
                //test
              
                // filter for DEPARTMENT
                this.api().columns([0]).every(function () {
                    // var column = this.api().column(1);
                    var column = this;
                    var select = $('<select class="form-control"><option value="">All</option></select>')
                        .appendTo($('#DEPARTMENT').empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();

                        });
                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>');
                    });
                });
            
           // filter for CAMPUS
                this.api().columns([14]).every(function () {
                 var column = this;
                var select = $('<select class="form-control"><option value="">All</option></select>')
                    .appendTo($('#CAMPUS').empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();

                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });

             });
            //ending for CAMPUS

            }
          //ending api filter

        });
        //ending classListTable call

我已经为一列使用了一次行分组，但不确定它是否可以对多列进行分组[1] ： https ://i.stack.imgur.com/3ou​​UE.png [2]：https://i.stack。 imgur.com/ZelNb.png

标签： jqueryasp.net-mvcdatatables