如何用JavaScript自动刷新Ninja Tables关联的Google Sheet表格

我有一个每5分钟更新数据的Google Sheet，该表格通过Ninja Tables展示在网站上。希望编写JavaScript函数实现每5分钟自动刷新表格的新数据。

尝试过的无效方法 #

方法一：直接请求Google Sheet页面替换innerHTML #

function run() {
    let xhr = new XMLHttpRequest();
    let url = 'https://docs.google.com';//已省略完整链接
    xhr.open("GET", url, true);
    
    var element = document.getElementById('footable_130431');
    if(element != null){
        console.log("element not null");
    }

    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            element.innerhtml = this.responseText;
        }
    }
    xhr.send();
}

setInterval(run, 30000);

问题：直接请求Google Sheet页面会触发浏览器跨域限制，且返回的是完整网页内容而非表格数据；另外innerhtml存在大小写拼写错误（应为innerHTML），即便修正也无法正确渲染Ninja Tables的组件结构。

方法二：重新赋值innerHTML #

function reload(){
    var container = document.getElementById("footable_130431");
    var content = container.innerHTML;
    container.innerHTML= content; 
    console.log("Refreshed"); 
}

setInterval(reload, 30000);

问题：无法刷新新数据，还会破坏表格的界面样式与交互功能——Ninja Tables的组件依赖初始化后的DOM结构和事件绑定，重新赋值innerHTML会丢失这些绑定关系。

正确的实现方案 #

核心思路 #

1. 先将Google Sheet发布为公开可访问的数据源（比如CSV或JSON格式），规避跨域问题；
2. 利用Ninja Tables的内置刷新机制，或获取最新数据后重新初始化表格组件。

代码实现 #

方案1：调用Ninja Tables内置刷新方法（优先推荐）

如果Ninja Tables提供了官方刷新API，可直接调用：

function refreshNinjaTable() {
    const table = document.getElementById('footable_130431');
    // 不同版本的Ninja Tables刷新方法可能有差异，可参考官方文档调整
    if (window.NinjaTables && NinjaTables.refresh) {
        NinjaTables.refresh(table);
    } else if (jQuery && jQuery(table).data('ninjaTable')) {
        jQuery(table).ninjaTable('refresh');
    }
}

// 每5分钟执行一次刷新（300000毫秒=5分钟）
setInterval(refreshNinjaTable, 300000);

方案2：重新加载数据源并初始化组件

如果没有内置刷新方法，可重新获取最新数据并重置表格：

async function refreshTable() {
    const container = document.getElementById('footable_130431');
    try {
        // 替换为你的Google Sheet公开数据源链接（如发布后的CSV链接）
        const response = await fetch('你的表格数据源链接');
        const newTableContent = await response.text();
        
        container.innerHTML = newTableContent;
        
        // 重新初始化Ninja Tables组件，根据实际初始化逻辑调整
        if (window.NinjaTables && NinjaTables.init) {
            NinjaTables.init(container);
        } else if (jQuery) {
            jQuery(container).find('.ninja-table').ninjaTable();
        }
        console.log("表格已刷新");
    } catch (error) {
        console.error("刷新失败:", error);
    }
}

// 每5分钟执行一次
setInterval(refreshTable, 300000);

关键注意事项 #

• 跨域问题：禁止直接请求Google Sheet原始页面，必须使用发布后的公开数据链接，或通过后端代理中转请求；
• 组件初始化：替换DOM内容后必须重新调用Ninja Tables的初始化方法，否则表格无法正常渲染和交互；
• 大小写敏感：JavaScript语法严格区分大小写，比如innerHTML不能写成innerhtml。

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