bootstrap table 使用入门

html     ps: 我用的引擎模板不是jsp 而是thymeleaf

　　　　　　　　　　　　　　　　<form id="form">
                                <div class="form-group">
                                    <div class="col-md-2"><input type="text" value="" id="ask" name="ask"
                                                                 placeholder="问题"></div>
                                    <div class="col-md-2"><input type="text" value="" id="keyword" name="keyword"
                                                                 placeholder="关键词"></div>
                                    <div class="col-md-2"><input type="text" value="" id="productName"
                                                                 name="productName" placeholder="商品名称"></div>
                                    <div class="col-md-2"><input type="text" value="" id="shopNum" name="shopNum"
                                                                 placeholder="商家编号"></div>
                                    <select id="org">
                                        <option value="部门">部门</option>
                                        <option th:each="org : ${orgs}" th:value="${org.getName()}"
                                                th:text="${org.getName()}"></option>
                                    </select>
　　　　　　　　　　　　　　　　　　　　　　//提示，button type=button 千万不能少，在使用ajax情况下会提交两给请求，一个ajax ，一个刷新界面
                                    <button th:type="button" class="btn btn-primary block full-width m-b"
                                            id="refresh_button">查询
                                    </button>
                                    <button th:type="button" class="btn btn-primary block full-width m-b"
                                            id="reset_button">重置
                                    </button>
                                </div>
                                <div class="form-group">      
                                    <span th:each="model:${knownledgeSorts}">
                                    <input class="cboxonclick" type="checkbox" th:name="${model.id}"/>
                                    <span th:text="${model.getSort()}"></span>          
                                </span>
                                </div>
                            </form>
                            <table id="table"></table>

 js

$("#reset_button").click(function () {
        document.getElementById("form").reset()
        $("#table").bootstrapTable('refresh');
    })

    $("#refresh_button").click(function () {

        var obj = document.getElementsByClassName("cboxonclick");
        var sorts = new Array();
        for (var i in obj) {
            if (obj[i].checked) {
                sorts.push(obj[i].name);
            }
        }


        var ask = $("#ask").val();
        var keyWord = $("#keyword").val();
        var productName = $("#productName").val();
        var shopNum = $("#shopNum").val();
        var org = $("#org").val();
        var sortList = sorts;


        $.ajax({
            type: "post",
            url: "/knowledge/queryKnowledgeAll",
            traditional: true,//防止深度序列化
            data: {
                ask: ask,
                keyWord: keyWord,
                productName: productName,
                shopNum: shopNum,
                dataOrg: org,
                sortList: sortList
            },
            success: function (data) {
                //重新加载table中的数据
                $('#table').bootstrapTable('load', data);
            }
        });
    });

    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="btn icon-edit"  data-toggle="modal" style="display:inline"/>&nbsp;',
            '<button type="button" class="btn icon-trash"  data-toggle="modal" style="display:inline"/>&nbsp;'
        ].join('');
    }

    window.operateEvents = {
        'click .icon-edit': function (e, value, row, index) {
            window.location.href = "knowledge/queryKnowledgeById?Id=" + row.id;
        },
        'click .icon-trash': function (e, value, row, index) {
            if (confirm("确认删除？")){
                var Ids = new Array();
                Ids.push(row.id);
                window.location.href = "knowledge/deleteBatchByIds?Ids" + ids;
            }
        }
    };

    //请求成功方法
    function responseHandler(result) {
        var errcode = result.errcode;//在此做了错误代码的判断
        if (errcode != 0) {
            alert("错误代码" + errcode);
            return;
        }

        //如果没有错误则返回数据，渲染表格
        console.log(result.data);
        return {
            total: result.total, //总页数,前面的key必须为"total"
            row: result.row//行数据，前面的key要与之前设置的dataField的值一致.

        };

    };

    $(function () {
        $('#table').bootstrapTable({
            url: '/knowledge/queryKnowledgeAll',
            pagination: true,
            cache: false,
            sidePagination: 'server',//指定服务器端分页
            dataField: "row",
            responseHandler: responseHandler,//请求数据成功后，渲染表格前的方法showFooter: true,//是否显示列脚
            pageNumber: 1,//这默认页码
            pageSize: 15, //每页的记录行数（*）
            pageList: [5, 10, 25, 50],//可供选择的每页的行数（*）
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            columns: [{
                field: 'id',
                title: 'Item ID',
                visible: false
            }, {
                field: 'dataOrg',
                title: '部门',
            }, {
                field: 'shopNum',
                title: '商家编号',
            }, {
                field: 'productName',
                title: '商品名称',
            }, {
                field: 'sortName',
                title: '分类',
            }, {
                field: 'productFactory',
                title: '生产厂家',
            }, {
                field: 'ask',
                title: '问题',
            }, {
                field: 'answer',
                title: '回答',
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                width: 100,
                formatter: operateFormatter,
                events: operateEvents
            }]
        })
    })

 

/**
     * 多条件查询（问题模糊查询、关键词模糊查询、商品名称模糊查询、
     * 商家编号模糊查询、部门查询、种类Sort查询、分页查询）
     */
    @RequestMapping("queryKnowledgeAll")
    @ResponseBody
    public PageUtil queryKnowledgeAll(String offset, String limit, KnowledgeBean knowledgeBean) {
        if (knowledgeBean.getDataOrg() != null && knowledgeBean.getDataOrg().equals("部门")) {
            knowledgeBean.setDataOrg("");
        }

        Integer star = 0;
        Integer pagesize = 15;

        if (offset != null || limit != null) {
            star = Integer.valueOf(offset);
            pagesize = Integer.valueOf(limit);
        }
        PageInfo<KnowledgeBean> pageInfo = knowledgeService.queryKnowledgeAll(star, pagesize, knowledgeBean);
        PageUtil pageUtil = new PageUtil((int) pageInfo.getTotal(), pageInfo.getList());
        return pageUtil;
    }

 

最后附上官网api    https://examples.bootstrap-table.com/