bootstraptable 之 工具栏 toolbar

 定义id="toolbar"的标签，如下图

    <div>
        <div id="toolbar">
            <button class="btn btn-success">添加</button>
        </div>
        <table id="userInfoManage" class="table"></table>
    </div>

  设置toolbar:'#toolbar',如下图

$('#userInfoManage').bootstrapTable('destroy').bootstrapTable({
        columns: [
            {
                field: '',
                title: '序号',
                formatter: function (value, row, index) {
                    return index+1;
                },
                halign:'center',
                align:'center'
            },{
                field: 'TrueName',
                title: '姓名',
                halign:'center',//表头居中显示
                align:'center'

            },{
                field: 'UserName',
                title: '用户名',
                halign:'center',
                align:'center'
            },{
                field: 'Phone',
                title: '电话',
                halign:'center',
                align:'center'
            },{
                field: 'Email',
                title: '邮件',
                halign:'center',
                align:'center'
            },{
                field: '',
                title: '管理',
                halign:'center',
                align:'center',
                width:'320px',
                formatter: function () {
                    return '<button class="btn btn-success" onclick="modifyUserData(this)">修改</button>' +
                        '<button class="btn btn-danger"onclick="deleteUserData(this)">删除</button>' +
                        '<button class="btn btn-warning"onclick="resetPassword(this)">密码重置</button>';
                },
            }],
        data: tableData,
        pagination:true,  //设置为 true 会在表格底部显示分页条。
        paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
        pageSize:20,//每页初始显示的条数
        pageList:[10,15,20],
        toolbar:'#toolbar',//工具栏
        toolbarAlign:'right',//工具栏的位置


    });

效果