jQuery Mobile Table Reflow Headers with i18next translations

Question

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

我知道当窗口小于一定的阈值时，jQM获取标题标签文本并将其放在每行值的前面。

我已经建立了演示here。要查看它的实际运行情况，请更改浏览器的宽度。

顶部表格具有预期的行为，但表格标题的内嵌文本以及底部表格显示问题，其中i18n表格标题在宽屏幕上以一个，两个，三个，四个正确显示，并且它们消失在狭窄的屏幕上。

我正在寻找一种方法来在移动视图的标题中使用i18n翻译，因为它已在整个网站的其他部分实施，并且工作得非常好。

感谢您的帮助！

Answer 1

所有您需要做的就是rebuild该表后翻译文本。

为什么？ 表小部件副本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