1

monitor.html

@@ -142,25 +142,10 @@
 
             function renderHistoryDataTable(data) {
                 const tableContainer = document.getElementById('history-table');
-    
-                if (!data || data.length === 0) {
-                    if (historyDataTable) {
-                        try {
-                            historyDataTable.destroy();
-                        } catch (e) {
-                            console.warn("销毁DataTable时出错:", e);
-                        }
-                        historyDataTable = null;
-                    }
-                    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;
-                    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',
@@ -172,73 +157,40 @@
                 });
 
                 historyCountBadge.textContent = data.length;
-                
-                // 安全地检查和销毁现有的 DataTable
+
+                // --- 核心修改部分 ---
+                // 如果 DataTable 实例已经存在，则直接导入新数据，而不是销毁重建
                 if (historyDataTable) {
-                    try {
-                        // 更安全的数据比较
-                        const currentDataLength = historyDataTable.data && historyDataTable.data.data ? 
-                            historyDataTable.data.data.length : 0;
-                        
-                        // 总是重建，避免复杂的数据比较逻辑
-                        historyDataTable.destroy();
-                    } catch (e) {
-                        console.warn("处理现有DataTable时出错:", e);
+                    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 = null;
+
+                    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');
+                    });
                 }
-                
-                // 清空容器
-                tableContainer.innerHTML = '';
-                
-                // 创建新的 DataTable
-                setTimeout(() => {
-                    try {
-                        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');
-                        });
-                    } catch (e) {
-                        console.error("创建DataTable时出错:", e);
-                        // 如果创建失败，回退到简单的HTML表格
-                        tableContainer.innerHTML = `
-                            <table class="min-w-full text-sm">
-                                <thead class="bg-gray-50">
-                                    <tr>
-                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易对</th>
-                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
-                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">利润</th>
-                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
-                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
-                                    </tr>
-                                </thead>
-                                <tbody class="divide-y divide-gray-200">
-                                    ${tableData.map(row => `
-                                        <tr class="hover:bg-gray-50">
-                                            <td class="px-3 py-2 whitespace-nowrap">${row[0]}</td>
-                                            <td class="px-3 py-2 whitespace-nowrap">${row[1]}</td>
-                                            <td class="px-3 py-2 whitespace-nowrap">${row[2] !== null ? row[2] : 'N/A'}</td>
-                                            <td class="px-3 py-2 whitespace-nowrap">${row[3]}</td>
-                                            <td class="px-3 py-2 whitespace-nowrap">${row[4]}</td>
-                                        </tr>
-                                    `).join('')}
-                                </tbody>
-                            </table>
-                        `;
-                    }
-                }, 100); // 增加延迟到100ms，确保DOM完全更新
             }
 
             // --- Main Logic Functions ---