带有 i18next 翻译的 jQuery Mobile 表重排标题

Question

我想使用 this page of the jQuery Mobile Demo site 中的代码(jQuery Mobile 1.4.2) 使用 i18next 翻译工具，但是在移动设备上查看表格时表格标题会消失。

我了解当窗口小于某个阈值时，jQM 会获取标题标签文本并将其放置在每行值的前面。

我已经构建了一个演示 here 。要查看实际效果，请更改浏览器的宽度。

顶部的表格具有预期的行为，但表格标题的内联文本，底部的表格显示了问题，其中 i18n 表格标题在宽屏幕上正确显示为一、二、三、四，并且在窄屏幕。

我正在寻找一种在移动 View 标题中使用国际化翻译的方法，因为它已经在网站的其余部分实现，并且运行良好。

感谢您的帮助!

Answer 1

您需要做的就是在翻译文本后重建表格。

为什么？ table 小部件复制 thead 的 header ，将其添加到内容之前的 tbody 中并隐藏它们。在小屏幕上， thead 被隐藏，复制的标题可见。

翻译后，您仅将更改应用于 thead header ，而不是 tbody 中的隐藏 header 。

i18n.init({
    preload: ['en', 'dev']
});
i18n.init({
    detectLngQS: 'lang'
});
i18n.init(function (t) {
    $("body").i18n();
    var appName = t("app.name");
    $("tableID").table("rebuild"); /* this */
});

Demo