# jankztable.html > v1.0 ~~~ <extend name="./Apps/JankzMaker/View/Public/main.html" /> <block name="metatitle"> <title>{{$meta_title}}</title> </block> <block name="my_css"></block> <block name="main"> <div class="ui bottom attached segment"> <div class="ui fluid grid"> <div class="six wide column "> <div class="ui mini buttons"> <notempty name="topbtns"> <volist name ="topbtns" id="topbtns"> <a href="{{$topbtns.second.href}}" class="ui compact button {{$topbtns.second.btn_class}}"> <i class="icon {{$topbtns.second.i_class}}"></i> {{$topbtns.second.name}} </a> &nbsp; </volist> </notempty> </div> </div> <div class="ten wide column"> <div class="ui form"> <div class="fields"> <div class="field"> <div class="ui mini icon input"> <input id="start" placeholder="點擊選擇開始日期"> <i class="calendar icon"></i> </div> </div> <div class="field"> <div class="ui mini icon input"> <input id="end" placeholder="點擊選擇開始日期"> <i class="calendar icon"></i> </div> </div> <div class="field"> <div class="ui mini search"> <div class="ui icon input aligned right"> <input class="prompt" type="text" placeholder="Search ..."> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> </div> </div> </div> <div class=""></div> </div> <table class="ui teal very compact table"> <notempty name="thead"> <thead> <tr> <th> <input class="check-all" type="checkbox"></th> <volist name="thead" id="thead" > <th>{{$thead.name}}</th> </volist> <notempty name="rightbtns"> <th>操作</th> </notempty> </tr> </thead> </notempty> <notempty name="tbody"> <tbody> <volist name ="tbody" id="tbody"> <tr> <td> <input class="ids" type="checkbox" value="{{$tbody[$main_key]}}" name="ids[]"></td> <volist name ="tbody_list" id="list"> <td>{{$tbody[$list['name']]}}</td> </volist> <notempty name="tbody.rightbtns"> <td> <div class="ui mini buttons"> <volist name ="tbody.rightbtns" id="rightbtns"> <a href="{{$rightbtns.href}}" class="ui icon button compact basic {{$rightbtns.btn_class}}"> <i class="icon {{$rightbtns.i_class}}"></i> </a> </volist> </div> </td> </notempty> </tr> </volist> </tbody> </notempty> </table> <notempty name="page_list"> <div id="page_list"> <input type="hidden" id="pages" value="{{$page_list}}"></div> </notempty> </div> </block> <block name="my_js"> <script src="__PUBLIC__/Common/laypage-v1.3/laypage/laypage.js"></script> <script type="text/javascript"> laypage({ cont: 'page_list', pages:$("#pages").val(), skip: true, //是否開啟跳頁 skin: 'molv', curr: function(){ //通過url獲取當前頁，也可以同上（pages）方式獲取 var page = location.search.match(/page=(\d+)/); return page ? page[1] : 1; }(), jump: function(e, first){ //觸發分頁后的回調 if(!first){ //一定要加此判斷，否則初始時會無限刷新 location.href = '?page='+e.curr; } } }); </script> </block> ~~~