javascript 的复选框问题：当您对行进行分组时，复选框会消失

Question

我有一个 DataTables 表。我有两种查看模式，第一种显示数据库中出现的所有行，而第二种模式根据特定标准对这些行进行分组（使用名为“Raggruppa”的按钮）。但是当我按下

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 = ''; // Add this global variable to store the selected 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);
                    
                    // Add this to force an update of the DataTable
                    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(); // Remove any existing filters

            // Find unique values in column 'badge'
            var uniqueBadges = Array.from(new Set(data.map(item => item.badge)));

            // Add a filter for each unique 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);
            });

            // Add the change event for the filter
            $('input[name="badgeFilter"]').change(function() {
                selectedBadge = $(this).val(); // Aggiorna la variabile selectedBadge
                var filteredData = selectedBadge ? data.filter(item => item.badge === selectedBadge) : data;
                initializeDataTable(filteredData);
            });
        }

        // Initialize the table when the page loads
        fetchDataAndInitializeTable();

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


        // Add a reset button after the button 'Raggruppa'
        $('<button id="resetBadgeFilters">Reset Filtri</button>').insertAfter($('#raggruppaButton'));

        // Add click event for reset button
        $('#resetBadgeFilters').click(function() {
            resetBadgeFilters();
        });
        
        //Add a button or event that retrieves selected data from checkboxes
        
        $('#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> <!-- Nuova intestazione per la colonna dei checkbox -->
        </tr>
    </thead>
</table>

Answer 1

好吧，我通过修改

initializeDataTable

函数来解决，以包括生成复选框，即使它们处于分组模式下

// ...
if (grouped) {
    // ...
    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": '<input type="checkbox" name="selectedUsers[]" value="' + groupItems[0].id + '">'
            });
        }
    }