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',//工具栏的位置


});

效果

————————————————
版权声明：本文为CSDN博主「IT小白3」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wangchaohpu/java/article/details/99737108