jQuery Mobileでポップアップの中にcolumntoggleなtableを表示したいんです

普通に書けば普通にできる。私は普通ではなかったのでハマった……

ただしカラム選択用ボタンはダメ。1画面1ポップアップとかそんな感じの制限があるっぽく、カラム選択ポップアップを表示すると元のtableを表示していたポップアップの方が消える。data-dismissible="false"にしても消える。しばらくデバッガで処理追ったけど、やめた。

カラム選択ボタンには.ui-table-columntoggle-btn {display: none;}で退場願った。

カラム優先順位data-priorityは1から6までしかないので、間違って7、8…と書くと「あれなんでこのカラム消えねーの・・・なんでや・・・」ってなる。

tableはtable-layout:fixedにしてtdにword-wrap:break-wordにしないと、改行ポイントのない長い英数字があったらそのカラムの幅が長くなってしまう。

参考

• Table: Column Toggle - jQuery Mobile Demos
• Column-Toggle Table Widget | jQuery Mobile API Documentation
• krzm.jp – CSS3モジュール一覧
  あまり知らなかったのですがCSS3ってまだこんな状況だったんですね
• CSS Text Module Level 3
• white-space - CSS | MDN
• word-wrap－CSS3リファレンス
• css - Word-wrap in an HTML table - Stack Overflow
• table-layout－スタイルシートリファレンス
• Popup - jQuery Mobile Demos

そんなことより

JQM1.3.2だと画面幅狭めて一度消えたカラムが、幅を戻しても戻らないんですね－。公式デモでも確かめられてしまう。JSFiddleでjQuery1.9と併用できるJQM1.3.0b1だとそんなことないんですけどねー。なんで1.3.2でそんなことになったんですかねー。