2

monitor.html

@@ -142,10 +142,27 @@
 
             function renderHistoryDataTable(data) {
                 const tableContainer = document.getElementById('history-table');
+
+                // 1. 如果 DataTable 实例已存在，则彻底销毁它并清理 DOM
+                if (historyDataTable) {
+                    historyDataTable.destroy();
+                    // 关键步骤：手动清空容器，确保创建一个全新的、干净的环境
+                    tableContainer.innerHTML = ''; 
+                }
+
+                // 2. 准备数据
+                // 如果没有数据，显示提示信息并提前退出
+                if (!data || data.length === 0) {
+                    tableContainer.innerHTML = '<thead><tr><th>交易对</th><th>状态</th><th>利润</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td colspan="5" class="text-center p-4 text-gray-500">没有历史记录。</td></tr></tbody>';
+                    historyCountBadge.textContent = 0;
+                    historyDataTable = null; // 确保实例也被清空
+                    return;
+                }
                 
-                // 将数据统一处理，方便后续使用
+                // 将原始数据映射为表格需要的格式
+                data.forEach(task => allTasksData[task.id] = task); 
+                const headings = ['交易对', '状态', '利润', '创建时间', '操作'];
                 const tableData = data.map(task => {
-                    allTasksData[task.id] = task; // 确保任务详情数据被更新
                     let creationTimeForSort = task.creationTime ? String(task.creationTime).replace(/,/g, '.') : "N/A";
                     return [
                         task.symbol || 'N/A',
@@ -157,39 +174,29 @@
                 });
 
                 historyCountBadge.textContent = data.length;
+                
+                // 3. 在清理过的容器上创建全新的 DataTable 实例
+                historyDataTable = new simpleDatatables.DataTable(tableContainer, {
+                    data: { headings, data: tableData },
+                    paging: false,
+                    perPageSelect: false,
+                    searchable: true,
+                    labels: { placeholder: "搜索...", noRows: "未找到记录" },
+                    columns: [ 
+                        { select: 2, type: 'number' },
+                        { select: 3, type: 'date', format: "YYYY-MM-DD HH:mm:ss.SSS" },
+                        { select: 4, sortable: false }
+                    ]
+                });
+                
+                // 确保每次创建后都进行排序
+                historyDataTable.on('datatable.init', () => {
+                    historyDataTable.columns.sort(3, 'desc');
+                });
 
-                // --- 核心修改部分 ---
-                // 如果 DataTable 实例已经存在，则直接导入新数据，而不是销毁重建
-                if (historyDataTable) {
-                    historyDataTable.rows.remove(0, historyDataTable.rows.length); // 先清空所有行
-                    historyDataTable.rows.add(tableData); // 再添加新数据行
-                    historyDataTable.columns.sort(3, 'desc'); // 重新按创建时间排序
-                } 
-                // 如果 DataTable 实例不存在（即第一次加载），则创建它
-                else {
-                    const headings = ['交易对', '状态', '利润', '创建时间', '操作'];
-                    
-                    if (!data || data.length === 0) {
-                         tableContainer.innerHTML = '<thead><tr><th>交易对</th><th>状态</th><th>利润</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td colspan="5" class="text-center p-4 text-gray-500">没有历史记录。</td></tr></tbody>';
-                         return;
-                    }
-
-                    historyDataTable = new simpleDatatables.DataTable(tableContainer, {
-                        data: { headings, data: tableData },
-                        paging: false,
-                        perPageSelect: false,
-                        searchable: true,
-                        labels: { placeholder: "搜索...", noRows: "未找到记录", info: "" },
-                        columns: [ 
-                            { select: 2, type: 'number' },
-                            { select: 3, type: 'date', format: "YYYY-MM-DD HH:mm:ss.SSS" },
-                            { select: 4, sortable: false }
-                        ]
-                    });
-                    
-                    historyDataTable.on('datatable.init', () => {
-                        historyDataTable.columns.sort(3, 'desc');
-                    });
+                // 对于重建的表格，需要手动触发一次排序，因为 'datatable.init' 可能仅在首次初始化时触发
+                if (historyDataTable.initialized) {
+                   historyDataTable.columns.sort(3, 'desc');
                 }
             }