如何解决jQuery DataTable分页后第一页外无法获取行属性值的问题

问题原因 #

你当前的写法是直接将点击事件绑定到页面初始加载时已存在的<td>元素上，jQuery DataTable在切换分页时会动态生成/销毁分页对应的表格DOM，新渲染出来的<td>没有绑定过点击事件，因此切换分页后点击失效。

解决方案 #

使用jQuery的事件委托机制，将事件绑定到页面加载完成后就一直存在的父级元素上（越靠近目标元素性能越好，这里可以直接选表格的<tbody>），再指定触发事件的目标元素为<td>，这样所有动态生成的<td>都会触发该事件。
另外你原代码里的两个$(document).ready可以合并，不需要重复声明。

修正后代码 #

$(document).ready(function() {
  // 初始化DataTable
  $('#table_id').DataTable();
  // 用事件委托绑定td点击事件
  $('#table_id tbody').on('click', 'td', function() {
      var id = $(this).attr('id');
      console.log(id);
  })
});

补充注意事项 #

你的HTML代码中存在大量重复的id属性，按照规范同一个HTML页面内的id必须是唯一值，如果你只是需要给单元格存储自定义标识，建议替换为data-*自定义属性，比如<td data-id="one">，取值时使用$(this).data('id')即可，避免id重复导致的其他未知问题。

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