1、实现效果

2、定义id="toolbar"的容器(id可以自定义)

                    <div class="row" id="toolbar">
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-plus" data-toggle="modal"
                                    href="#addType" data-keyboard="true" data-backdrop="false"
                                    id="btn_add">新增</button>
                        </div>
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-edit" data-toggle="modal" href="#"
                                    onclick="javascript:showUpdateModal()" data-keyboard="true"
                                    data-backdrop="false" id="btn_up">修改</button>
                        </div>
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-remove" id="btn_del"
                                    onclick="deleteType()">删除</button>
                        </div>
                    </div>

3、在bootstrapTable初始化函数中添加toolbar

var $table=$('#table');
            $table.bootstrapTable({
               url:"/ssm_test/type/getType",
                toolbar:'#toolbar',
               dataType:'json',
               method:'post',
               contentType:"application/x-www-form-urlencoded",//发送到服务器的数据编码类型
                pagination:true,            //是否显示分页
                pageSize:30,                //设置每页的记录行数
                pageNumber:1,               //设置首页页码
                singleSelect:false,         //设置是否单选
                checkboxHeader:true,
                clickToSelect:true,
                showRefresh:true,   //是否显示刷新按钮
                showToggle:true,    //是否显示详细视图和列表视图的切换按钮
                showColumns:true,   //选择要显示的列
                striped: true,      //是否显示行间隔色
                queryParamsType:"undefined",//设置参数格式
                queryParams:function queryParams(params) {//设置查询参数
                        var params={
                            page:params.pageNumber,
                            rows:params.pageSize
                        };
                        return params;
                },
                catch:false,                //禁用AJAX数据缓存
                sidePagination:"server",    //服务端处理分页
                columns:[{
                   checkbox:true
                },{
                   title:'类型id',
                    field:'id',
                    valign:'middle'
                },{
                   title:'类型名称',
                    field:'name',
                    valign:'middle'
                }]
            });
        })

更多推荐

BootStrap-table插件添加toolbar工具栏