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

【问题标题】：jQuery Mobile Table Reflow Headers with i18next translations带有 i18next 翻译的 jQuery Mobile 表重排标题
【发布时间】：2014-07-31 15:53:07
【问题描述】：

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

我知道当窗口小于某个阈值时，jQM 将标题标签文本放在每行值的前面。

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

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

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

感谢您的帮助！

【问题讨论】：

标签： jquery jquery-mobile i18next

【解决方案1】：

您只需在翻译文本后rebuild表格。

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

翻译时，您只对thead 标头应用更改，而不是tbody 中的隐藏标头。

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

【讨论】：