Rails中DataTable分页切换后图标不显示且操作无法跳转问题

这问题我之前在项目里也碰到过，结合你的描述，核心原因是DataTable翻页时会动态重新生成表格DOM元素，如果初始的渲染逻辑和事件绑定只针对页面加载时的静态元素，就会出现图标消失、事件失效的情况，再加上可能的语言配置问题，就会显示西语文本。下面给你一步步的解决方案：

一、先搞定操作列的图标渲染问题 #

不管是前端渲染还是服务器端渲染，都要确保翻页时操作列能正确生成图标：

情况1：前端渲染操作列（推荐） #

直接在DataTable的配置里指定columns的render函数，让DataTable每次渲染行都生成图标，而不是依赖初始页面的静态HTML：

$(document).ready(function() {
  $('#user-table').DataTable({
    // 其他基础配置（比如ajax、pagination等）
    columns: [
      { data: 'name', title: '用户名' },
      { data: 'email', title: '邮箱' },
      // 操作列的渲染逻辑
      {
        data: null,
        title: '操作',
        orderable: false, // 操作列不需要排序
        render: function(data, type, row) {
          // 用row里的用户ID拼接跳转链接，生成图标按钮
          return `
            <a href="/users/${row.id}" class="action-btn show-btn" title="详情">
              <i class="fa fa-eye"></i>
            </a>
            <a href="/users/${row.id}/edit" class="action-btn edit-btn" title="编辑用户">
              <i class="fa fa-pencil"></i>
            </a>
          `;
        }
      }
    ],
    // 强制设置语言为中文/英文，避免西语默认文本
    language: {
      "sProcessing": "处理中...",
      "sLengthMenu": "显示 _MENU_ 条结果",
      "sZeroRecords": "没有匹配结果",
      // 其他语言项可以按需补充，或者直接用默认英文
    }
  });
});

情况2：服务器端渲染（如果用serverSide模式） #

如果你的DataTable是服务器端分页（serverSide: true），要确保后端返回的JSON里，操作列是完整的HTML代码，而不是纯文本：
在Rails控制器里：

def index
  @users = User.order(created_at: :desc)
  respond_to do |format|
    format.html
    format.json do
      render json: {
        draw: params[:draw].to_i,
        recordsTotal: @users.count,
        recordsFiltered: @users.count,
        data: @users.map do |user|
          [
            user.name,
            user.email,
            # 用view_context生成带图标的链接，确保HTML不被转义
            view_context.link_to(
              '<i class="fa fa-eye"></i>'.html_safe, 
              user, 
              class: 'action-btn show-btn',
              title: '详情'
            ) + ' ' +
            view_context.link_to(
              '<i class="fa fa-pencil"></i>'.html_safe, 
              edit_user_path(user), 
              class: 'action-btn edit-btn',
              title: '编辑用户'
            )
          ]
        end
      }
    end
  end
end

同时前端DataTable配置要确保不转义操作列的HTML：

$('#user-table').DataTable({
  serverSide: true,
  ajax: '/users.json',
  columns: [
    { data: 0, title: '用户名' },
    { data: 1, title: '邮箱' },
    { data: 2, title: '操作', orderable: false }
  ],
  columnDefs: [
    {
      targets: 2, // 操作列的索引（从0开始）
      render: function(data) {
        return data; // 直接返回HTML，不做转义处理
      }
    }
  ]
});

二、修复点击无响应的问题 #

初始页面的点击事件只绑定了静态DOM元素，翻页后动态生成的按钮没绑定事件，必须用事件委托来解决：

// 不要用 $('.edit-btn').click(function() { ... })
// 改用事件委托，绑定到父容器或者document
$(document).on('click', '.action-btn', function(e) {
  e.preventDefault();
  // 直接跳转到链接地址
  window.location.href = $(this).attr('href');
});

这样不管按钮是页面加载时生成的，还是翻页后动态生成的，点击事件都会被触发。

三、排查西语文本的来源 #

如果还是显示西语文本，检查这两个点：

• 有没有在application.js里错误引入了DataTable的西班牙语语言包：比如//= require datatables/i18n/es，把它换成中文或者删掉；
• 检查Rails的I18n配置，是不是默认语言设成了西班牙语（config/locales/es.yml被设为默认），如果是，改回中文或英文即可。

内容的提问来源于stack exchange，提问作者José Antonio Camus Godoy