javascriptであるリストを羅列したいときに,例えばページのフォーマットがA4用紙であるような場合にはリストが用紙(table1)をはみ出してしまうような場合に 次の用紙(table2)に羅列していく必要があります.それでもはみ出してしまうような場合はさらにtable3へ…とい行ったように入力によってどんどんページを増やして行かなくてはなりません.
その時には再帰関数を定義するとコードがスッキリするでしょう. 今回は以下のようなコードを書きました.
<script> // ページのロードが完了したら再帰関数の実行 $(document).ready(function(){ var page = 1; recall(page); }); // 再帰関数本体 function recall(page){ var is_over = overlist(page); if(is_over){ page++; recall(page); } } // リストが溢れているか判定する関数 function overlist(page){ var buttom_margin = 10; var card = $(".card"+page); var elements = $('.billing_item', card); var card_height = $('.card'+page).outerHeight(); var element_len = elements.length; var is_over = false; var over_list = []; for (var i=0; i<element_len; i++){ if(is_over){ over_list.push(elements[i]); } else { var top = $(elements[i]).position().top; var height = $(elements[i]).outerHeight(); if(top + height + buttom_margin > card_height){ is_over = true; page++; new_table(page); over_list.push(elements[i]); } } } // 溢れたリストがあれば次のページのテーブルにprepend $(".tbody" + page).prepend(over_list); return is_over } // 新しいページを作る関数 function new_table(page){ var element_card = $('#card-default').clone().removeAttr("id").addClass("card"+page); $("tbody",element_card).attr("class", "tbody"+page); $("section",element_card).attr("id", "section"+page); $(".card"+(page-1)).after(element_card); } </script>
<!-- Html 追加ページ用フォーマット --> <div style="display:none"> <div id="card-default"> <section class="print_doc" id="section"> <table> <thead"> <tr> <th>No.</th> <th>品目</th> <th>数量</th> <th>単価</th> <th>価格</th> </tr> </thead> <tbody> </tbody> </table> </section> </div> </div>
これらをうまく活用して組み込めばページ区切りのされたリストの表示ができます. このデフォルトのテーブルにあえて溢れるようなdatasのリストを表示させようとしても,再帰関数がリストがA4フォーマットからはみ出なくなるまでテーブルを複製し続けていきます.
<section class="print_doc" id="section1"> <table> <thead"> <tr> <th>No.</th> <th>品目</th> <th>数量</th> <th>単価</th> <th>価格</th> </tr> </thead> <tbody class="tbody1"> <?php foreach ($datas['billing_items'] as $i => $item): ?> <tr id = <?= $i ?> > <td><?= h($i + 1); ?></td> <td><?= nl2br(h($item["item_name"])); ?></td> <td><?= h(number_format($item["quantity"])); ?></td> <td><?= h(number_format($item["price"])); ?></td> <td><?= h(number_format($item["subtotal"])); ?> </td> </tr> <?php endforeach ?> </tbody> </table> </section>