<style disabled>
 header > *, footer > * {
 margin: 1em auto;
 text-align: center;
 }
 thead th {
 white-space: nowrap;
 text-align: center;
 }
 tbody {
 counter-reset: index;
 }
 tbody td {
 vertical-align: middle;
 }
 tbody td.index:before {
 counter-increment: index;
 content: counter( index );
 }
</style>
<script src="PageList.js"></script>

<div class="form-inline">
 <header class="row">
 <label class="col-md-3 form-group">
 显示
 <select class="form-control" name="rows" value="${view.rows}">
 <option>10</option>
 <option>20</option>
 <option>30</option>
 </select>
 行
 </label>
 <div class="col-md-9 form-group">
 <slot name="toolbar"></slot>
 <input type="search" class="form-control"
 name="keyWord" placeholder="回车搜索" />
 </div>
 </header>

 <slot><!-- Default Slot for ListView --></slot>

 <footer class="row">
 <span class="col-md-3 form-group">
 共
 <output class="form-control"><!-- ${view.total} --></output>
 行
 </span>
 <label class="col-md-4 form-group">
 跳转到
 <input type="number" class="form-control"
 name="page" value="${view.page}"
 min="1" max="${view.pageSum}" />
 页
 </label>
 <ul class="col-md-5 pagination" onclick="${view.pageChange}">

 <li style="display: ${(view.page < 3) ? 'none' : ''}">
 <span>1</span>
 </li>
 <li style="display: ${(view.pageSum < 7) || (view.page < 4) ? 'none' : ''}"
 class="disabled">
 <span>...</span>
 </li>
 <li style="display: ${(view.page < 2) ? 'none' : ''}">
 <span><!--${view.page - 1}--></span>
 </li>
 <li class="active">
 <span><!--${view.page}--></span>
 </li>
 <li style="display: ${(+view.page + 1 > view.pageSum) ? 'none' : ''}">
 <span><!--${+view.page + 1}--></span>
 </li>
 <li style="display: ${(view.pageSum < 6) || (+view.page + 3 > view.pageSum) ? 'none' : ''}"
 class="disabled">
 <span>...</span>
 </li>
 <li style="display: ${(+view.page + 2 > view.pageSum) ? 'none' : ''}">
 <span><!--${view.pageSum}--></span>
 </li>
 </ul>
 </footer>
</div>