如何在DataTables排序后点击地图标记时正确选中对应行所在页面

问题根源 #

你当前代码里用table.row(tr).index()获取的是数据加载时的原始索引，但DataTables排序后，分页逻辑是基于当前排序后的行顺序，用原始索引计算页码自然会定位错误。取消分页时所有行都显示，原始索引能对应到行，但分页后就会失效。

修复方案 #

1. 用DataTables内置方法获取正确页码

直接调用table.row(tr).page()方法，这个方法会自动考虑当前的排序、过滤状态，返回行所在的页码（从0开始），不需要手动计算。

2. 优化行匹配逻辑（可选但更可靠）

原来通过解析popup的HTML内容来匹配行容易出错（比如内容格式变化就会失效），建议在创建marker时直接绑定对应数据的唯一标识，点击时直接用这个标识查找行。

修改后的完整代码 #

// 全局变量放在循环外，避免重复定义
var currentMarker = null;
var currentTableRow = null;

// Add markers and event listeners
for (var i = 0; i < dataArray.length; i++) {
  var marker = L.marker([dataArray[i][5], dataArray[i][6]]).addTo(map);
  var bookName = dataArray[i][2];
  marker.bindPopup("Book: " + bookName + "<br>" + "Pages: " + dataArray[i][3]);
  
  // 给marker绑定对应书籍名称，方便后续查找
  marker.bookName = bookName;

  marker.on("click", function(e) {
    var table = $('#data-table').DataTable();
    var targetBookName = this.bookName; // 直接从marker获取绑定的书籍名称
    
    // 查找匹配的行（用column().search()更高效）
    var row = table.column(2).search(targetBookName, false, true).rows().nodes()[0];
    table.column(2).search(''); // 清空搜索，避免影响后续操作

    if (row !== undefined) {
      // 高亮新行，移除旧行高亮
      $(row).addClass("highlight");
      if (currentTableRow !== null) {
        $(currentTableRow).removeClass("highlight");
      }

      currentMarker = this;
      currentTableRow = row;

      // 获取当前行所在的页码并跳转
      var targetPage = table.row(row).page();
      table.page(targetPage).draw(false); // draw(false)保留当前排序/过滤状态
    }
  });
}

关键修改说明 #

• 把currentMarker和currentTableRow移到循环外，避免每次循环都重新定义。
• 给每个marker绑定bookName属性，跳过解析popup HTML的步骤，匹配逻辑更稳定。
• 用table.column().search()快速定位行，比遍历所有行的效率更高。
• 用table.row(row).page()获取正确的页码，替代手动计算的方式，适配排序后的状态。
• 调用table.page(targetPage).draw(false)，draw(false)参数确保跳转页面时不重置当前的排序、过滤状态。

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