Bootstrap Table初体验

Bootstrap Table作为一款基于Bootstrap的插件，支持自定义参数与后台交互，提供强大的分页功能，能够快速方便的展示数据。
官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数

页面

引用文件

来源于http://www.bootcdn.cn/

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

相对于普通bootstrap项目需要引入bootstrap table的css和js以及中文包

html

较为方便的一种方式是全部使用js进行table的构建
html页面部分只需要相应的带id的table标签

<table id="productTable"></table>

完整html

<div id="page-wrapper">
    <div class="col-md-6 col-md-offset-3 col-xs-12">
        <!-- 头部图片和搜索框 -->
        <div id="topSearch">
            <div id="search">
                <span class="input-group"> 
                    <input type="text" id="searchText" class="form-control"> 
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" id="searchBtn">
                            <strong>搜地猫</strong>
                        </button>
                     </span>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" id="resetBtn">
                            <strong>重置</strong>
                        </button>
                    </span>
                 </span>
            </div>
        </div>

        <!-- 商品展示列表 -->
        <div>
            <table id="productTable">
                <caption><span>点击商品加入购物车</span></caption>
            </table>
        </div>

    </div>
</div>  <!-- page-wrapper -->

js

相对基本的配置

$('#productTable').bootstrapTable({
    url : 'getProducts',            // 请求数据
    striped : true,                  // 隔行着色
    pagination : true,            // 分页 
    queryParams : queryParams,     // 传递参数 
    sidePagination : "server",    // 分页方式，服务端分页 
    pageNumber : 1,                  // 加载首页 
    pageSize : 10,                // 每页的记录行数 
    pageList : [10, 25, 50, 100],    // 可供选择的分页
    showColumns : true,              // 显示列按钮
    showRefresh : true,              // 刷新按钮
    minimumCountColumns : 1,        // 最少允许的列数
    showToggle : true,            // 详细视图和列表视图切换按钮
    columns : [ {                   // 列
        field : 'productId',
        title : '编号'
    }, {
        field : 'productName',
        title : '名称'
    }, {
        field : 'doublePrice',
        title : '单价'
    } ],
    onClickRow : clickRow           // 单击表格行事件
});

// 向后台传递的参数
function queryParams(params) {
    return {
        offset : params.offset,         // 分页偏移量
        limit : params.limit,             // 每页数量   
        search : $('#searchText').val() // 搜索关键字
    }
}

queryParams对应的function传递的参数可以自定义
分页功能需要的参数是offset和 limit，分别代表查询偏移量和查询记录数，传入后台使用SQL语句的limit进行查询

后端

后端使用SpringMVC+MyBatis返回json数据
需要jackson包
不用maven需要以下依赖

jackson依赖

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.7.4</version>
</dependency>

返回的json数据中必须要包含total(总数)和rows(数据)

service层

    /**
     * 查询商品目录
     * 对于boostrap-table，返回的json必须包含total(总数)和rows(数据)
     * 
     * @param offset 偏移量
     * @param limit 每页数量
     * @param search 搜索关键字
     * @return
     */
    @Override
    public Map<String, Object> queryProduct(int offset, int limit, String search) {
        Map<String, Object> map = new HashMap<>();

        // 业务逻辑处理

        map.put("total", total);
        map.put("rows", products);
        
        return map;
    }

web层

    @RequestMapping("/getProducts")
    @ResponseBody
    public Map<String, Object> getProducts(int offset, int limit, String search) {
        return productService.queryProduct(offset, limit, search);
    }

效果展示

使用bootstrap table进行数据展示

完整项目下载

https://github.com/wch853/dmall

体验地址

http://106.14.200.121/dmall/product