Datatables中行内FlyTo按钮首次点击后失效的修复咨询

问题背景 #

• 基于Datatables实现skiTable表格，每行对应一座滑雪山，行内包含FlyTo按钮，点击调用Mapbox GL JS的map.flyTo定位到对应滑雪山的经纬度（aa_x/aa_y）
• 地图缩放后，通过map.queryRenderedFeatures()获取当前可视区域的滑雪山数据，转换为aDemoItems更新Datatables数据源
• 首次加载表格时FlyTo按钮点击正常，后续点击无响应，控制台报错：

  Uncaught TypeError: Cannot read properties of undefined (reading 'properties')
  

• 列定义的render函数中console.log(row)能正常打印包含properties的完整数据

原因分析 #

1. Datatables重新初始化导致行数据关联失效：每次更新数据源时用destroy: true重新初始化表格，旧的Datatables实例被销毁，新实例的行DOM与旧的事件委托上下文脱节，skiTable.row($(this).parents('tr')).data()返回undefined
2. 冗余配置干扰：初始化代码中dataType: 'json'是AJAX数据源的配置，本地数组数据不需要该参数，可能导致内部数据解析异常

解决方案 #

方案1：直接在按钮上存储经纬度（推荐） #

绕过Datatables实例的行数据依赖，把经纬度直接存在按钮的自定义属性中，点击时直接读取：

修改列render函数

columns: [{
    data: "properties.name",
    defaultContent: "<i>Not set</i>",
    render: function (data, type, row) {
        // 将经纬度存入按钮的data属性
        return `<button data-lng="${row.properties.aa_x}" data-lat="${row.properties.aa_y}">FlyTo</button>`;
    }
}]

修改点击事件处理

$('#ski_index').on('click', 'button', function () {
    // 直接从按钮属性读取经纬度
    const lng = $(this).data('lng');
    const lat = $(this).data('lat');
    map.flyTo({ center: [lng, lat], zoom: 15 });
});

该方法完全不依赖Datatables实例的行数据，无论表格如何重新初始化都能正常工作。

方案2：重新绑定事件到新的Datatables实例 #

如果必须依赖Datatables行数据，每次初始化表格后重新绑定事件，并增加空值判断：

抽离事件处理函数

function handleFlyToClick() {
    const rowData = skiTable.row($(this).closest('tr')).data();
    // 增加空值判断，避免报错
    if (!rowData?.properties) return;
    const lng = rowData.properties.aa_x;
    const lat = rowData.properties.aa_y;
    map.flyTo({ center: [lng, lat], zoom: 15 });
}

修改表格初始化逻辑

// 先解绑旧事件，避免重复触发
$('#ski_index').off('click', 'button');

// 初始化表格（去掉冗余的dataType配置）
let skiTable = $('#ski_index').DataTable({
    stateSave: true,
    stateDuration: 60 * 60 * 48,
    responsive: true,
    info: true,
    destroy: true,
    data: aDemoItems,
    columns: [{
        data: "properties.name",
        defaultContent: "<i>Not set</i>",
        render: function (data, type, row) {
            return '<button>FlyTo</button>';
        }
    }]
});

// 绑定新事件到当前实例
$('#ski_index').on('click', 'button', handleFlyToClick);

额外优化建议 #

• 移除初始化代码中冗余的dataType: 'json'配置
• 使用const/let代替全局变量x/y，避免污染全局作用域
• 用closest('tr')代替parents('tr')，更精准地定位当前行

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