三步搞定多语言表格分页！Layui国际化方案让你的系统秒变全球化

2026-02-04 04:50:59作者：裴麒琰

你是否还在为多语言网站的表格分页显示烦恼？客户投诉英文界面出现中文"每页显示"？运营反馈海外用户看不懂分页按钮？本文将通过三步实战，教你基于Layui实现表格分页的多语言自定义方案，让你的Web系统轻松支持全球业务拓展。

读完本文你将掌握：

Layui表格组件分页文本的国际化配置方法
多语言切换功能的前端实现技巧
动态语言包的加载与缓存策略

方案背景与核心痛点

在全球化业务场景中，表格（Table）作为数据展示的核心组件，其分页控件的多语言支持直接影响用户体验。Layui作为国内流行的UI框架，自2.12版本起通过i18n模块提供了完整的国际化解决方案。官方文档显示，表格组件（table）的分页文本默认使用中文，如"共 100 条"、"每页显示"等，这在海外部署时会造成严重的用户体验问题。

通过分析docs/table/index.md可知，Layui表格的分页文本主要包含：

分页信息展示：如"共 {count} 条"
页码导航：如"上一页"、"下一页"
每页条数选择器：如"每页显示"

而i18n模块文档则明确了这些文本对应的国际化配置路径，为我们的自定义方案提供了理论基础。

实现步骤

1. 配置语言环境与基础语言包

Layui推荐使用全局配置方式确保国际化在组件渲染前生效。在引入layui.js之前，通过LAYUI_GLOBAL.i18n对象配置默认语言环境和基础语言包：

<script>
// 全局配置应放在layui.js引入之前
window.LAYUI_GLOBAL = {
  i18n: {
    locale: 'zh-CN', // 默认中文
    messages: {
      'zh-CN': { // 中文语言包
        table: {
          page: {
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            count: '共 {count} 条',
            limit: '每页显示',
            refresh: '刷新',
            skip: '跳至',
            prev: '上一页',
            next: '下一页'
          }
        }
      },
      'en': { // 英文语言包
        table: {
          page: {
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            count: 'Total {count} items',
            limit: 'Items per page',
            refresh: 'Refresh',
            skip: 'Jump to',
            prev: 'Previous',
            next: 'Next'
          }
        }
      }
    }
  }
};
</script>
<script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>

注意：CDN地址使用国内静态资源库，确保访问速度和稳定性。完整的语言包选项可参考i18n/detail/options.md

2. 初始化多语言表格组件

使用table.render()方法初始化表格时，通过page参数启用分页功能，Layui会自动应用当前语言环境的文本配置：

layui.use(['table', 'i18n'], function(){
  var table = layui.table;
  var i18n = layui.i18n;
  
  // 渲染表格
  table.render({
    elem: '#demo',
    url: '/api/data', // 实际项目中替换为你的数据接口
    page: true, // 启用分页
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: 'Username', width:120},
      {field: 'email', title: 'Email'}
    ]]
  });
  
  // 语言切换按钮事件
  document.getElementById('lang-switch').addEventListener('change', function(){
    var lang = this.value;
    // 切换语言环境
    i18n.set({locale: lang});
    // 重载表格使语言生效
    table.reload('demo', {
      page: {
        curr: 1 // 重置到第一页
      }
    });
  });
});

3. 高级应用：动态加载语言包

对于大型项目，建议将语言包单独存放并动态加载，避免初始加载资源过大。以法语为例，创建lang/fr.js文件：

// fr.js
window.layuiLang = window.layuiLang || {};
window.layuiLang.fr = {
  table: {
    page: {
      layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
      count: 'Total {count} éléments',
      limit: 'Éléments par page',
      refresh: 'Actualiser',
      skip: 'Aller à',
      prev: 'Précédent',
      next: 'Suivant'
    }
  }
};

然后在需要时动态加载并应用：

// 动态加载法语包
function loadFrenchLang() {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script');
    script.src = 'lang/fr.js';
    script.onload = function() {
      // 将加载的语言包添加到i18n配置
      layui.i18n.set({
        messages: {
          'fr': window.layuiLang.fr
        }
      });
      resolve();
    };
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 使用示例
document.getElementById('load-fr').addEventListener('click', function(){
  loadFrenchLang().then(function(){
    layui.i18n.set({locale: 'fr'});
    layui.table.reload('demo');
  });
});