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