<table></table>で自動ページネーションをしてみる(ajaxじゃないやつ)

ページネーションのプラグインはとても豊富。

中でも、jQuery.autopagerはすごく素敵です。

ある要素にIDを振っておいて、スクロールした時に

そのIDを持つDOM要素が表示されたら、ページネーションするといった具合。

所謂、無限スクロールというやつ。

それをとても簡単に実装出来るのがjQuery.autopager

https://code.google.com/p/jquery-autopager/

それをテーブルでもやりたいなと思った。

さらに、jQuery.autopagerはajaxで次ページを取得して、末尾にappendする仕組みになっているけど、

そうではなく、htmlはすべて生成済みでテーブル要素は最初の数十件のみ表示させ、以降は予めdisplay:none;とか、$.hide();で隠しておき、最後の要素が表示された時点で次のn件を表示させたい。

理由は
1.Ajax使いたくない

2.高負荷のSQL等で取得したオブジェクト群を「次へ」で取得しようとすると、もう一度SQLを実行しなければならない。

3.とは言え数千件のテーブルを一度に表示しようとすると、CSSやJavascriptを適用している場合、描画が重すぎてブラウザがマミる...。

ということで、利用したプラグインは

protonet/jquery.inview · GitHub

指定したDOM要素が「見えた!」時にイベントが発生するだけのプラグイン。

HTML

<table id="paginate">
  <tbody>
  <tr>
    <!--ここから-->
    <td>1行目</td> 
    <td>2行目</td>
    <td>3行目</td>
    <td>4行目</td>
          :
    <td>24行目</td>
    <td>25行目</td>
    <!--ここまで表示しておく-->

    <!--以降は隠しておく-->
    <td>26行目</td>
    <td>27行目</td>
    <td>28行目</td>
    <td>29行目</td>
    <td>30行目</td>
    <td>31行目</td>
    <td>32行目</td>
    <td>33行目</td>
  </tr>
  </tbody>
</table>

Javascript

<script>
    var target = '#paginate tbody';

    var visible = 25; //最初に表示させる件数

    $(target + ' tr:lt(' + visible + ')').show(); //最初の表示
    $(target + ' tr:gt(' + visible + ')').hide(); //以降は隠す

    //targetの最後の要素が見えたらイベント着火
    $(target + ':last-child').on('inview', function(){
        visible += 100; //次に表示する件数

        $(target + ' tr:lt(' + visible + ')').show(); //隠していた要素を表示
    });
</script>

やっていることはとても単純。

これで、テーブルのケツまで行ったら次のn件を表示が実装できた。

あまり早くスクロールし過ぎると、イベント着火しないで通りすぎてしまう可能性があるので、そういう場合は

$(target + ':nth-last-child(10)').on('inview', function(){
  //ぺ〜じね〜と処理
});

とかして、最後から数えて10件目の要素が見えた段階でイベントを着火させて次ページを表示しておけば、通り過ぎることもないかな?