vue bootstrap 带分页表格

前端渲染分页表格整体解决方案

后端数据提供

分页参数对象

@Data
public class PageParameters {
    /**
     * 请求第几页,下标起始为1
     */
    private Integer page;

    /**
     * 每页是多少条数据
     */
    private Integer size;

    public Integer getPage() {
        return page == null ? 1 : page;
    }

    public Integer getSize() {
        return size == null ? 10 : size;
    }
}

返回给前端的页面显示对象

@Data
public class PageResult<T> {
    /**
     * 表格数据
     */
    private final List<T> content = new ArrayList<T>();
    /**
     * 总共的数据条数
     */
    private long totalElements;
    /**
     * 总页数
     */
    private int totalPages;
    /**
     * 是否是最后一页
     */
    private Boolean last;
    /**
     * 是否是第一页
     */
    private Boolean first;

    /**
     * 没有页多少条数据
     */
    private int size;
    /**
     * 当前第几页
     */
    private int number;

    /**
     * @param content       表格内容
     * @param parameters    分页参数
     * @param totalElements 总共的条数
     */
    public PageResult(List<T> content, PageParameters parameters, Number totalElements) {
        this.content.addAll(content);
        this.totalElements = totalElements.longValue();
        if ((totalElements.intValue() % parameters.getSize()) == 0) {
            //能整除
            this.totalPages = (totalElements.intValue() / parameters.getSize());
        } else {
            this.totalPages = (totalElements.intValue() / parameters.getSize()) + 1;
        }
        first = parameters.getPage() == 1;
        last = parameters.getPage() == totalPages;
        size = parameters.getSize();
        number = parameters.getPage();
    }
}

前端显示

需要的js库

• jquery

• bootstrap

• bootstrap-table.css ( 只要css )

• vue

• axios (http请求 可以自己选用)

页面

表格

<table class="table table-bordered table-condensed">
            <thead>
            <tr>
                <th>发货商</th>
                <th>订单时间</th>
                <th>订单号</th>
                <th>商品性质</th>
                <th>订单状态</th>
                <th>导出状态</th>
                <th>出库状态</th>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>小计金额</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="detail in tableData.content">
                <td>{{detail.supplierName}}</td>
                <td>{{detail.crtTime}}</td>
                <td>{{detail.orderSubNo}}</td>
                <td>{{vueTranslateDict('tradeNature',detail.tradeNature)}}</td>
                <td>{{vueTranslateDict('orderStatus',detail.orderStatus)}}</td>
                <td>{{vueTranslateDict('exportStatus',detail.exportStatus)}}</td>
                <td>{{vueTranslateDict('outStatus',detail.outStatus)}}</td>
                <td>{{detail.goodsCode}}</td>
                <td>{{detail.goodsName}}</td>
                <td>{{detail.quantity}}</td>
                <td>{{detail.totalPrice}}</td>
            </tr>
            </tbody>
        </table>

分页条

<div class="fixed-table-pagination" style="display: block;">
           <div class="pull-left pagination-detail"><span class="pagination-info">
               <#--显示第 1 到第 10 条记录,-->
                   总共 {{tableData.totalElements}} 记录,每页显示</span>
               <span class="page-list">
                   <span class="btn-group dropup">
                       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                           <span class="page-size">{{outOption.size}}</span>
                           <span class="caret"></span>
                       </button>

                       <ul class="dropdown-menu" role="menu">
                           <li role="menuitem" v-bind:class="{active: size===outOption.size}" class=""
                               v-for="size in pageSizeConfig">
                               <a href="#" v-on:click="changePageSize(size)">{{size}}</a>
                           </li>
                       </ul>
                   </span>条记录</span>
           </div>
           <div class="pull-right pagination">
               <ul class="pagination">
                   <li class="page-item page-pre" v-bind:class="{disabled: tableData.first}"
                       v-on:click="toPage(tableData.number-1)">
                       <a href="#">
                           <span>上一页</span>
                       </a>
                   </li>

               <#--总的页数大于等于5-->
                   <li v-for="i in tableData.totalPages" v-bind:class="{ active: i == tableData.number }"
                       v-on:click="toPage(i)" v-if="tableData.totalPages <= 5">
                       <a href="#">{{i}}</a>
                   </li>


               <#--总的页数大于5-->
                   <li v-bind:class="{ active: 1 == tableData.number }" v-on:click="toPage(1)"
                       v-if="tableData.totalPages > 5">
                       <a href="#">1</a>
                   </li>

                   <li v-bind:class="{ active: 2 == tableData.number }" v-on:click="toPage(2)"
                       v-if="tableData.totalPages > 5 && tableData.number <= 4">
                       <a href="#">2</a>
                   </li>

                   <li class="page-item page-last-separator disabled"
                       v-if="tableData.totalPages > 5 && tableData.number > 4">
                       <a class="page-link" href="#">...</a>
                   </li>


                   <li v-for="i in 3" class="page-link" v-bind:class="{ active: i+2 == tableData.number }"
                       v-on:click="toPage(i+2)"
                       v-if="tableData.totalPages >5 && tableData.number < 5 && tableData.totalPages - tableData.number > 3">
                       <a href="#">{{i+2}}</a>
                   </li>
               <#--显示中间三个按钮-->
                   <li v-for="i in 3" v-bind:class="{ active: i == 2 }"
                       v-on:click="toPage(i+(tableData.number)-2)"
                       v-if="tableData.totalPages >5 && tableData.number >= 5 && tableData.totalPages - tableData.number > 3">
                       <a href="#">{{i+(tableData.number)-2}}</a>
                   </li>


                   <li v-for="i in 3" class="page-link"
                       v-bind:class="{ active: tableData.totalPages - 5 + i == tableData.number }"
                       v-on:click="toPage(tableData.totalPages -5 + i)"
                       v-if="tableData.totalPages >5 && tableData.number > 5 && (tableData.totalPages - tableData.number <= 3)">
                       <a href="#">{{tableData.totalPages -5 + i}}</a>
                   </li>


                   <li class="page-item page-last-separator disabled"
                       v-if="tableData.totalPages >5 && tableData.totalPages - tableData.number > 3">
                       <a class="page-link" href="#">...</a>
                   </li>
               <#--倒数第二页-->
                   <li v-bind:class="{ active: tableData.totalPages-1 === tableData.number }"
                       v-on:click="toPage(tableData.totalPages-1)"
                       v-if="tableData.totalPages >5 && tableData.totalPages - tableData.number <= 3">
                       <a href="#">{{tableData.totalPages-1}}</a>
                   </li>

                   <li v-bind:class="{ active: tableData.totalPages === tableData.number }"
                       v-on:click="toPage(tableData.totalPages)"
                       v-if="tableData.totalPages > 5">
                       <a href="#">{{tableData.totalPages}}</a>
                   </li>

                   <li class="page-item page-next" v-bind:class="{disabled: tableData.last}"
                       v-on:click="toPage(tableData.number + 1)">
                       <a href="#">
                           <span>下一页</span>
                       </a>
                   </li>
               </ul>
           </div>
       </div>

javascript代码

var app = new Vue({
            el: '#app',
            data: {
                pageAgs: {
                    page: 1,
                    size: 10
                },
                pageSizeConfig: [10, 25, 50, 100],
                tableData: {
                    totalElements: 0,
                    number: 0,
                    first: true,
                    last: true
                }
            } 
	})