footable.jsを使用している際に列を非表示にする方法まとめ。
footable.jsの機能で、列の先頭の<th>タグにdata-hide属性を設定すると、
その列は非表示になる。
非表示に設定できる種類は3種類。
data-hide="phone"
…画面サイズがbreakpointsのphoneで設定したサイズ以下になったら非表示
data-hide="tablet"
…画面サイズがbreakpointsのtabletで設定したサイズ以下になったら非表示
data-hide="all"
…問答無用で最初から非表示
列を非表示にしたい場合の大概はdata-hide属性で事足りるんだけど
これ、最初っからタグに直書きしておかないと列が非表示にならない。
jqueryを使って後付けで列非表示にする方法がわからなくて困った熊った。
通常、特定のclassが付いている列を非表示にする方法は
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.footable.js"></script>
<script type="text/javascript">
$(function(){
$('.footable').footable();
target_index = $('.footable th.target ').index() + 1;
$('.footable th:nth-child('+ target_index +'), .footable td:nth-child('+ target_index +')').hide();
});
</script>
<table class="footable">
<thead>
<tr>
<th>表示したい列</th>
<th class="target">非表示にしたい列</th>
<th>表示したい列</th>
</tr>
</thead>
<tbody>
～～～
</tbody>
</table>
</script>
class="target"の列番号取得→取得した列番号をdisplay:noneに設定
っていう流れで列は非表示にできるんだけど
footable.jsを使っているとこの方法は使えない。
画面サイズ変更すると、非表示にした列が表示されるんですよ…ホラー
何が起こってるかって言うと、画面サイズを変えた途端に
display:noneがdisplay:table-cellに変更される。
これを防ぐためにどうするかって言うと、footable.jsを読み込む前に
data-hide属性を設定するのが解決方法。
「footable.jsの実行前」じゃなくて「footable.jsを読み込む前」です。
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
$(function(){
target_index = $('.footable th.target ').index() + 1;
$('.footable th:nth-child('+ target_index +')').attr('data-hide', 'all');
});
</script>
<script type="text/javascript" src="../jquery.footable.js"></script>
<script type="text/javascript">
$(function(){
$('.footable').footable();
});
</script>
<table class="footable">
<thead>
<tr>
<th>表示したい列</th>
<th class="target">非表示にしたい列</th>
<th>表示したい列</th>
</tr>
</thead>
<tbody>
～～～
</tbody>
</table>
忘れがちだけど、JavaScriptの読み込み速度はとにかく先に書いたもの勝ち。
readyとかonloadとかに惑わされない。
