bootstraptable 之工具栏 toolbar

最新推荐文章于 2025-06-24 10:58:46 发布

一名写前端的GISer

最新推荐文章于 2025-06-24 10:58:46 发布

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/wangchaohpu/article/details/99737108

Bootstrap 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何利用BootstrapTable插件在网页中创建一个包含工具栏的数据管理表格，详细展示了设置工具栏位置、按钮操作及表格字段格式化的具体代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


    });

效果