bootstrap-table的使用

最新推荐文章于 2025-10-07 00:37:02 发布

原创最新推荐文章于 2025-10-07 00:37:02 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #bootstrap-table

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

一、背景

使用bootstrap框架进行页面编写的时候发现其组件中没有表格，网上查找发现有一个插件bootstrap-table，但是使用教程有些繁杂，走了一点弯路，希望写下此篇博客，让需要的人可以直接使用，避免采坑。

二、使用

bootstrap-table的使用包含客户端和服务端的使用，我这里主要说服务端的使用，因为一般数据都是从后台动态加载的。

在说如何使用之前先上一张图，看看达到的效果能不能符合你的要求

enter image description here

1、引入css/js文件

因为bootstrap-table是基于bootstrap开发的一个表格插件，所以需要引入bootstrap相关的css和js，引入bootstrap-table相关的css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

目录结构如图：

enter image description here

我这里使用的是webstorm开发工具做的测试，如果使用IDEA或Eclipse，可直接将bootstrap-table下的文件拷贝到webapp目录下

2、添加table标签

在body标签内加人table标签，来动态加载表格

 <table id="table" class="table"></table>

3.通过js语法动态加载表格数据

 <script>
    $('#table').bootstrapTable({
        url: 'http://localhost:8080/user/findAllByPage', //获取数据的请求url
        method: 'get',    //请求方式GET
        dataType: "json", //返回json格式数据
        toolbar:'#toolbar',
        striped: true,
        cache: false,
        //dataField: "data",   //使用服务端这里要注释掉
        classes:'table',//边框
        undefinedText:'',//当数据为 undefined 时显示的字符
        pagination:true,//启动分页
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        paginationLoop:true,
        sidePagination: "server",
        pageNumber: 1,                  //初始化加载第一页，默认第一页,并记录
        pageSize: 2,                           //每页的记录行数（*）
        pageList: [10, 25, 50, 100],       //可供选择的每页的行数（*）

        showColumns: true,  //显示下拉框勾选要显示的列
        showRefresh: true,  //显示刷新按钮
        showToggle:true,//显示一行是否改成竖着
        // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        cardView: false,//是否显示详细视图
        showPaginationSwitch:false,//是否显示 下面的分页框
        minimumCountColumns: 2,
        search: false,   //是否显示表格搜索
        clickToSelect: true,                //是否启用点击选中行
        detailView:false,//是否显示父子表

        //得到查询的参数
        queryParams : function (params) {
            console.log(params)
            console.log(params.limit)
            //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize: params.limit,                         //每页显示数量  服务端分页需要
                pageIndex:params.offset,                       //起始索引   服务端分页需要
            };
            return temp;
        },
        columns: [{
            field: 'checkbox',
            title: 'checkbox',
            checkbox:true
        }, {
            field: 'number',
            title: '序号',
            formatter: function(value,row,index){
                return index+1;
            }
        }, {
            field: 'username', //对应后台的字段名
            title: '用户名',
            align: 'center'
        }, {
            field: 'email',
            title: '邮箱',
            align: 'center'
        }, {
            field: 'phone',
            title: '手机号'
        }, {
            field: 'enable',
            title: '状态',
            formatter: function(value,row,index){
                if (value){
                    return "激活"
                }else {
                    return "不可用"
                }
            }
        },{
            title: '操作',
            field: 'caozuo',
            align: 'center',
            formatter:actionFormatter
        }],

    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var id = value;
        var result = "";
        result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
        result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
        return result;
    }
</script>

其中相关配置已有说明，这里不再赘述，当没有获取到数据时显示如下：

enter image description here

4、后台java代码

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findAllByPage")
public Map findAllByPage(@RequestParam(value = "pageSize") Integer pageSize,
                         @RequestParam(value = "pageIndex") Integer pageIndex){
    System.out.println(pageIndex+" "+pageSize);
    Map map = new HashMap(  );
    List<User> list= new ArrayList<>(  );
    User user = new User();
    user.setEmail( "123@qq.com" );
    user.setEnable( true );
    user.setPassword( "123456" );
    user.setPhone( "13516452565" );
    user.setUsername( "张三" );
    list.add( user );

    User user2 = new User();
    user2.setEmail( "123566@qq.com" );
    user2.setEnable( true );
    user2.setPassword( "123456" );
    user2.setPhone( "13516452565" );
    user2.setUsername( "李四" );
    list.add( user2 );
    User user3 = new User();
    user3.setEmail( "123566@qq.com" );
    user3.setEnable( true );
    user3.setPassword( "123456" );
    user3.setPhone( "13516452565" );
    user3.setUsername( "王五" );
    list.add( user3 );
    User user4 = new User();
    user4.setEmail( "123566@qq.com" );
    user4.setEnable( true );
    user4.setPassword( "123456" );
    user4.setPhone( "13516452565" );
    user4.setUsername( "王五" );
    list.add( user4 );
    User user5 = new User();
    user5.setEmail( "123566@qq.com" );
    user5.setEnable( true );
    user5.setPassword( "123456" );
    user5.setPhone( "13516452565" );
    user5.setUsername( "王五" );
    list.add( user5 );

    map.put( "total", 5);
    map.put( "rows",list );
    return map;
}
}

其中

@CrossOrigin表示支持跨域 因为我这里不在一个项目中，涉及到跨域问题
@RestController 是@ResponseBody和@Controller结合的注解，表示是可以返回json格式的Controller    
@RequestMapping注解表示映射的url
@RequestParam注解表示接收前端传来的参数  value代表参数名称 后面的Integer表示接收的类型 pageSize表示把接收的值赋值给它 
pageSize表示每页显示记录数，pageIndex表示查询的起始索引

我这里没有从数据库获取数据，而是返回了固定写死的5个数据，大家可以根据需要从数据库获取数据并分页