DataTable桌面端正常加载，移动端加载失败问题求助

我有一个填充数据的DataTable，桌面端运行正常，但移动端数据加载不出来。用移动端网页检查器查看控制台，只显示“Load failed”错误。我怀疑是表格所在的div容器（#InstHolderHolder）宽度影响了数据加载，导致表格显示“no data available in table”提示，已经试过调整容器宽度，但没解决问题。

相关代码 #

HTML #

<div id="instholderholder" class="row mt-2 p-2 border d-flex flex-column">
    <select class="form-select" style="width: 210px;" name="instselection" id="instselectionid"></select>
</div>

JS #

async function Institutions(inst) {
    var ku = await getit()
    var k = ku[0]
    var u = ku[1]
    $('#instholderholder').append('<div id="InstHolderHolder" class="col-12 col-lg-8"></div>');
    
    var responsing = await fetch(u + '/v4/13f-asset-allocation-date?apikey=' + k)
    var dating = await responsing.json()
    
    var ticker = $('#title').text()
    var response = await fetch(u + '/v4/institutional-ownership/institutional-holders/symbol-ownership?date=' + inst + '&symbol=' + ticker + '&page=0&apikey=' + k)
    var data = await response.json()
    
    var inst = document.getElementById('InstHolderHolder')
    instHeader = "<table id='insttable' class='table table-striped table-bordered border'><thead style='font-family: Trebuchet MS, Tahoma, sans-serif;'><th>cik</th><th>Date</th><th>Name</th><th>Weight in Fund</th><th>Percentage Change in Weight (%)</th><th>Ownership of Company</th><th>Percentage Change in Ownership (%)</th></thead>"
    instBody = "<tbody>"
    for (let index=0; index<data.length; index++) {
        let first = "<tr>" + 
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + data[index].cik + "</td>" +
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + data[index].date + "</td>" +
            "<td><a style='text-decoration: none; font-family: Trebuchet MS, Tahoma, sans-serif;' href='/institutions/" + data[index].cik + "'>" + data[index].investorName + "</td>" +
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + parseFloat(data[index].weight).toFixed(2) + "</td>" + 
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + parseFloat(data[index].changeInWeightPercentage).toFixed(2) + "</td>" +
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + parseFloat(data[index].ownership).toFixed(2) + "</td>" + 
            "<td style='font-family: Trebuchet MS, Tahoma, sans-serif;'>" + parseFloat(data[index].changeInOwnershipPercentage).toFixed(2) + "</td>" + 
            "</tr>"
        instBody += first
    };
    inst.innerHTML = "<h4>Changes in Institutional Ownership</h4>" + instHeader + instBody + "</tbody></table><table id='Datatable'></table>"
    
    var WindowWidth = window.innerWidth
    if (WindowWidth < 600) {
        $('#insttable').DataTable({"scrollX": true});
    } else {
        $('#insttable').DataTable();
    }
};

1. 补全请求错误捕获，明确失败原因 #

控制台的“Load failed”信息太模糊，给fetch请求添加错误捕获，排查移动端请求是否异常：

// 修改核心请求代码，添加错误处理
var response;
try {
    response = await fetch(u + '/v4/institutional-ownership/institutional-holders/symbol-ownership?date=' + inst + '&symbol=' + ticker + '&page=0&apikey=' + k);
    // 检查HTTP状态码
    if (!response.ok) {
        throw new Error(`请求失败，状态码: ${response.status}`);
    }
    var data = await response.json();
} catch (error) {
    console.error('数据加载错误详情:', error);
    // 给用户显示明确提示
    instContainer.innerHTML = "<p>数据加载失败，请检查网络或稍后重试</p>";
    return;
}

2. 修复变量名冲突问题 #

函数参数inst被后续容器变量覆盖，导致逻辑潜在异常，重命名容器变量：

// 替换原容器获取代码
var instContainer = document.getElementById('InstHolderHolder');
// 后续所有用到inst的地方替换为instContainer
instContainer.innerHTML = "<h4>Changes in Institutional Ownership</h4>" + instHeader + instBody + "</tbody></table><table id='Datatable'></table>";

3. 确保DataTable初始化时机正确 #

动态生成表格后，需等待DOM渲染完成再初始化DataTable，避免初始化时表格节点未就绪：

// 替换原DataTable初始化代码
requestAnimationFrame(() => {
    const isMobile = window.innerWidth < 600;
    $('#insttable').DataTable({
        scrollX: isMobile,
        // 可选：添加移动端适配配置
        responsive: true
    });
});

4. 优化移动端容器与表格样式 #

给容器添加溢出控制，避免表格被容器截断：

#InstHolderHolder {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px; /* 避免滚动条遮挡内容 */
}

/* 可选：优化移动端表格单元格内边距 */
@media (max-width: 600px) {
    #insttable td, #insttable th {
        padding: 6px 8px;
        font-size: 14px;
    }
}

5. 清理ticker值的冗余内容 #

移动端可能获取到#title的空格或换行符，导致请求的symbol参数无效：

var ticker = $('#title').text().trim();

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