Bootstrap table 插件的使用

使用bootstrap的table插件：

1.首先我们要先引入js:

    

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

   <script src="jquery.min.js"></script>

   <script src="bootstrap.min.js"></script>

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

   <script src="bootstrap-table.js"></script>

   <script src="bootstrap-table-zh-CN.js"></script>

 

2.在html中声明一个table对象

   

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

 

 

 

3.一个表格的详细配置，先上个效果图吧

在上图中，我们是使用JS方式进行初始化表格内容的，JS代码如下所示

var $table;
        //初始化bootstrap-table的内容
        function InitMainTable () {
            //记录页面bootstrap-table全局变量$table，方便应用
            $table = $('#grid').bootstrapTable({
                url: '/user/findList',                      //请求后台的URL（*）
                method: 'GET',                      //请求方式（*）
                toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: rows,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                      //是否显示表格搜索
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                //得到查询的参数
                queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var temp = {   
                        limit: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true,  
                    visible: true                  //是否显示复选框  
                }, {
                    field: 'Name',
                    title: '姓名',
                    sortable: true
                }, {
                    field: 'Mobile',
                    title: '手机',
                    sortable: true
                }, {
                    field: 'Email',
                    title: '邮箱',
                    sortable: true,
                    formatter: emailFormatter
                }, {
                    field: 'Homepage',
                    title: '主页',
                    formatter: linkFormatter
                }, {
                    field: 'Hobby',
                    title: '兴趣爱好'
                }, {
                    field: 'Gender',
                    title: '性别',
                    sortable: true
                }, {
                    field: 'Age',
                    title: '年龄'
                }, {
                    field: 'BirthDate',
                    title: '出生日期',
                    formatter: dateFormatter
                }, {
                    field: 'Height',
                    title: '身高'
                }, {
                    field: 'Note',
                    title: '备注'
                }, {
                    field:'ID',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }, ],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    showTips("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                    var id = row.ID;
                    EditViewById(id, 'view');
                },
            });
        };

 

后台数据传输格式是  {total:10,row:[{id:1,name:2},{id:1,name:2}]}

 @ResponseBody
    @RequestMapping(value = "/user/findUsers",method = RequestMethod.GET)
    public String findUsers(UserDTO userDTO) throws ActException{
        Map<String,Object> maps = new HashMap<>();
        try {
            // 可以不用判断，自动会识别
            if(StringUtils.isNotBlank(userDTO.getUserName())){
                userDTO.addRT(RT.eq("userName", userDTO.getUserName()));
            }
            if(StringUtils.isNotBlank(userDTO.getSort())&&StringUtils.isNotBlank(userDTO.getSortOrder())){
                userDTO.addSort(userDTO.getSort()+"="+userDTO.getSortOrder());
            }
            maps.put("total",userService.count(userDTO));
            maps.put("rows", userService.findByPage(userDTO));
              return JSON.toJSONString(maps);
        }catch (SerException e){
            throw new ActException(e.getMessage());
        }

    }

 

到这里就结束啦

详细可以看这里   https://www.cnblogs.com/wuhuacong/p/7284420.html