DataTables分组行时Checkbox消失的JavaScript问题

我有一个DataTables表格，包含两种视图模式：

• 展示数据库中的所有原始行：此时复选框正常显示
• 点击名为'Raggruppa'的按钮按特定条件分组：分组后复选框消失

我的JavaScript代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        console.log("Document ready");
        var dataTable;
        var grouped = false;
        var selectedBadge = ''; // 存储选中的badge

        function initializeDataTable(data) {
            if (dataTable) {
                dataTable.destroy();
            }
        
            if (grouped) {
                var groupedData = {};
                data.forEach(function(item) {
                    var groupName = item.id.replace(/\d+/g, '').trim();
                    if (!groupedData[groupName]) {
                        groupedData[groupName] = [];
                    }
                    groupedData[groupName].push(item);
                });
        
                var tableData = [];
                for (var groupName in groupedData) {
                    if (groupedData.hasOwnProperty(groupName)) {
                        var groupItems = groupedData[groupName];
                        var badgeText = groupItems[0].badge;
                        tableData.push({
                            "id": '<span class="badge">' + badgeText + '</span> ' + groupItems[0].id,
                            "username": groupItems.map(function(item) { return item.username; }).join('<br>'),
                            "checkbox": ''
                        });
                    }
                }
        
                dataTable = $('#userTable').DataTable({
                    "data": tableData,
                    "columns": [
                        {"data": "checkbox"},
                        {"data": "id"},
                        {"data": "username"}
                    ]
                });
            } else {
                dataTable = $('#userTable').DataTable({
                    "data": data,
                    "columns": [
                        {
                            "data": null,
                            "render": function (data, type, row) {
                                if (!grouped) {
                                    return '<input type="checkbox" name="selectedUsers[]" value="' + data.id + '">';
                                } else {
                                    return '';
                                }
                            }
                        },

                        {
                            "data": null,
                            "render": function (data, type, row) {
                                return '<span class="badge">' + data.badge + '</span> ' + data.id;
                            }
                        },
                        {"data": "username"},
                    ]
                });
            }
        }
        
        function toggleButtonLabel() {
            var button = $('#raggruppaButton');
            if (grouped) {
                button.text("Mostra tutte le righe");
            } else {
                button.text("Raggruppa");
            }
        }

        function fetchDataAndInitializeTable() {
            $.ajax({
                url: "/data",
                type: "GET",
                success: function(response) {
                    console.log("Data received:", response);
                    var filteredData = applyBadgeFilter(response); 
                    populateBadgeFilters(response); 
                    initializeDataTable(filteredData);
                    
                    dataTable.draw(); 
                },
                error: function(error) {
                    console.log("Error:", error);
                }
            });
        }

        function applyBadgeFilter(data) {
            return selectedBadge ? data.filter(item => item.badge === selectedBadge) : data;
        }

        function toggleButtonLabel() {
            var button = $('#raggruppaButton');
            if (grouped) {
                button.text("Mostra tutte le righe");
            } else {
                button.text("Raggruppa");
            }
        }

        function resetBadgeFilters() {
            selectedBadge = '';
            $('input[name="badgeFilter"]').prop('checked', false);
            fetchDataAndInitializeTable();
        }

        function populateBadgeFilters(data) {
            var badgeFilters = $('#badgeFilters');
            badgeFilters.empty(); // 移除现有筛选器

            // 获取badge列的唯一值
            var uniqueBadges = Array.from(new Set(data.map(item => item.badge)));

            // 为每个唯一badge添加筛选器
            uniqueBadges.forEach(function(badge) {
                var label = $('<label></label>');
                var radio = $('<input type="radio" name="badgeFilter" value="' + badge + '">').appendTo(label);
                label.append(badge);
                badgeFilters.append(label);
            });

            // 绑定筛选器变更事件
            $('input[name="badgeFilter"]').change(function() {
                selectedBadge = $(this).val(); 
                var filteredData = selectedBadge ? data.filter(item => item.badge === selectedBadge) : data;
                initializeDataTable(filteredData);
            });
        }

        // 页面加载时初始化表格
        fetchDataAndInitializeTable();

        $('#raggruppaButton').click(function() {
            grouped = !grouped;
            toggleButtonLabel();
            fetchDataAndInitializeTable();
        });

        // 在Raggruppa按钮后添加重置按钮
        $('<button id="resetBadgeFilters">Reset Filtri</button>').insertAfter($('#raggruppaButton'));

        // 绑定重置按钮点击事件
        $('#resetBadgeFilters').click(function() {
            resetBadgeFilters();
        });
        
        // 获取复选框选中的数据
        $('#ottieniSelezioneButton').click(function() {
            var selectedUsers = $('input[name="selectedUsers[]"]:checked').map(function() {
                return this.value;
            }).get();
            console.log("Utenti selezionati:", selectedUsers);
        });
    });
</script>

我的HTML结构 #

<button id="ottieniSelezioneButton">Ottieni Selezione</button>
<button id="raggruppaButton">Raggruppa</button><br><br>
<div id="badgeFilters">
    <label><input type="radio" name="badgeFilter" value="" checked>Tutti</label>
</div><br>
<table id="userTable" class="display">
    <thead>
        <tr>
            <th>box</th>
            <th>ID</th>
            <th>Username</th>
        </tr>
    </thead>
</table>

问题原因及解决方案 #

问题根源

在initializeDataTable函数的分组分支中，构建tableData时给checkbox字段赋值为空字符串""，DataTables直接渲染这个空值，所以分组后复选列没有内容。

解决方案

根据需求选择以下一种方式修改：

1. 分组后显示组级复选框
   修改分组模式下tableData的构建逻辑，生成组级复选框：

   tableData.push({
       "id": '<span class="badge">' + badgeText + '</span> ' + groupItems[0].id,
       "username": groupItems.map(function(item) { return item.username; }).join('<br>'),
       // 生成组级复选框，值为组名
       "checkbox": '<input type="checkbox" name="selectedGroups[]" value="' + groupName + '">'
   });
   

   同时修改选中项获取逻辑，支持获取组内所有用户ID：

   // 新增全局变量存储原始数据
   var originalData;
   
   function fetchDataAndInitializeTable() {
       $.ajax({
           url: "/data",
           type: "GET",
           success: function(response) {
               originalData = response; // 保存原始数据
               console.log("Data received:", response);
               var filteredData = applyBadgeFilter(response); 
               populateBadgeFilters(response); 
               initializeDataTable(filteredData);
               
               dataTable.draw(); 
           },
           error: function(error) {
               console.log("Error:", error);
           }
       });
   }
   
   // 修改获取选中项的函数
   $('#ottieniSelezioneButton').click(function() {
       var selectedUsers = [];
       // 收集未分组模式的选中项
       $('input[name="selectedUsers[]"]:checked').each(function() {
           selectedUsers.push(this.value);
       });
       // 收集分组模式的选中项（组内所有用户ID）
       $('input[name="selectedGroups[]"]:checked').each(function() {
           var groupName = this.value;
           var groupUsers = originalData.filter(item => item.id.replace(/\d+/g, '').trim() === groupName);
           selectedUsers.push(...groupUsers.map(item => item.id));
       });
       console.log("Utenti selezionati:", selectedUsers);
   });
   

2. 分组后显示占位复选框（禁用状态）
   如果不需要组级选中功能，只是希望复选列有占位样式，修改checkbox字段的值：

   tableData.push({
       "id": '<span class="badge">' + badgeText + '</span> ' + groupItems[0].id,
       "username": groupItems.map(function(item) { return item.username; }).join('<br>'),
       "checkbox": '<input type="checkbox" disabled>'
   });
   

内容的提问来源于stack exchange，提问作者Peter Long