Bootstrap-table实现查询、分页、导出、参数设置及前后端代码示例详解

最新推荐文章于 2024-03-13 14:26:16 发布

立小言先森

最新推荐文章于 2024-03-13 14:26:16 发布

阅读量2w

点赞数 4

分类专栏：【前端】文章标签： bootstrap-table 分页 checkbox visible 查询

本文链接：https://blog.csdn.net/yaomingyang/article/details/80320791

版权

【前端】专栏收录该内容

28 篇文章 1 订阅

订阅专栏

官方文档可以参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
页面效果图：
这里写图片描述
- 要控制左侧的复选框按钮属性设置：

 checkbox: false,

控制内容下拉列中是否显示的属性设置：

visible: false

后端代码要返回查询符合条件的总条数
表格中的数据导出要引入如下文件：

<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/public/plugin/bootstrap-table/tableExport.js"></script>

属性设置：

        //显示导出插件
        showExport: true, 
        //文件名称设置
        exportOptions:{
            fileName: document.title  
        }

首先帖出来前端页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消息处理中心</title>
<link rel="stylesheet" href="/public/plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/plugin/bootstrap-table/dist/bootstrap-table.css">

<script src="/public/js/jquery-2.1.1.min.js"></script>
<script src="/public/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/public/plugin/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/public/plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/public/plugin/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div id="toolbar"></div>
        <table id="bootstrapTable" ></table>
    </div>
</div>
</body>
<script type="text/javascript">
$(function(){
    initTable();
});
function initTable() {
    //先销毁表格  
    $("#bootstrapTable").bootstrapTable({
        //表格高度
        height: getHeight(),
        //服务器数据的请求方式 'get' 或 'post'。
        method: 'get',
        //设置为 true 会有隔行变色效果
        striped: true,
        //设置为 true 会在表格底部显示分页条。
        pagination: true,
        //请求后台的URL
        url: '/MsgDealCenterAction/listData',
        //服务器返回的数据类型。
        dataType: 'json',
        //工具按钮用哪个容器
        toolbar: '#toolbar', 
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
        cache: false, 
        //设置为 true 启用分页条无限循环的功能
//         paginationLoop: true,
        //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法
        sidePagination: 'server', 
        //初始化加载第一页，默认第一页
        pageNumber: 1, 
        //每页的记录行数
        pageSize: 10, 
        //可供选择的每页的行数
        pageList: [10,15,20, 50, 100], 
        //设置为false 将禁止所有列的排序。
        sortable: true,
        //设置默认排序为 name
        sortName: 'insert_time', 
        //定义排序方式，'asc' 或者 'desc'。
        sortOrder: "desc",  
        //是否显示刷新按钮
        showRefresh: true,
        //是否显示内容列下拉框。
        showColumns: true,
        //显示导出插件
        showExport: true, 
        //是否显示右上角的搜索框
        search: false,
        //是否显示切换视图（table/card）按钮。
        showToggle:false,
        //是否启用点击选中行
//         clickToSelect: true, 
        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
        //设置为limit可以获取limit, offset, search, sort, order  
        queryParamsType:'undefined',
        //请求服务器数据
        queryParams: function queryParams(params){
            var param = {    
                 pageNumber: params.pageNumber,    
                 pageSize: params.pageSize,
                 sortName: params.sortName,
                 sortOrder: params.sortOrder
             };    
             return param;    
        },
        //加载成功时执行
        onLoadSuccess: function(data){    
            console.log("加载成功");  
        },
        //加载失败时执行  
        onLoadError: function(status){  
            console.log("加载数据失败"+status);  
        },
        columns: [
        {
           title: "全选",
           field: "select",
           checkbox: false,
           width: 20,//宽度
           align: "left",//水平
           valign: "middle",
           formatter: function (value, row, index) {
                return row._id;
           }
        },{
            title: '编号',//标题  可不加
            align: 'center',
            valign: 'middle',
            sortable: false,
            formatter: function (value, row, index) {
                return index+1;
            }
        },{
            field: 'source',
            title: '产品线',
            align: 'center',
            valign: 'middle',
            sortable: false,
            width:  '80px'
        },{
            field: 'msg_type',
            title: '消息类型',
            align: 'center',
            valign: 'middle',
            sortable: false
        },{
            field: 'account_name',
            title: '账号类型',
            align: 'center',
            valign: 'middle',
            sortable: false
        },{
            field: 'msg_name',
            title: '消息名称',
            align: 'left',
            valign: 'middle',
            sortable: false
        },{
            field: 'msg',
            title: '消息内容',
            align: 'left',
            valign: 'middle',
            sortable: false,
            visible: false,
            //value【字段值】row【row对应的整条记录】index【行索引】
            formatter: function format(value,row,index){
                console.log(typeof(value)) 
                // 缩进一个2个空格
                  return JSON.stringify(value, null, 2);  
            }
        },{
            field: 'msg_start_time',
            title: '起始有效时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'msg_end_time',
            title: '结束有效时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'insert_time',
            title: '入库时间',
            align: 'center',
            valign: 'middle',
            sortable: true
        },{
            field: 'update_time',
            title: '更新时间',
            align: 'center',
            valign: 'middle',
            sortable: true,
            visible: false
        }]
    });
}
//获取table的高度
function getHeight() {
    return $(window).height() - 100;
}
</script>
</html>

下面是后端的代码：

    public static void listData(Integer pageNumber,Integer pageSize,String sortName,String sortOrder, Integer source, Integer msg_type, String account_name) {
        DBCollection collection = MongoUtil.getGGUserCollection("gg_deal_msg_center");
        BasicDBObject query = new BasicDBObject();
        //产品线
        if(ObjectUtils.isNotNull(source)) {
            query.append("source", source);
        }
        //消息类型
        if(ObjectUtils.isNotNull(msg_type)) {
            query.append("msg_type", msg_type);
        }

        if(StringUtils.isNotBlank(account_name)) {
            List<Long> accountIds = getAccountIdByName(account_name);
            query.append("account_id", new BasicDBObject("$in", accountIds));
        }
        //数据总条数
        long count = collection.count(query);

        BasicDBObject orderBy = new BasicDBObject(sortName, SortEnum.fromSortValue(sortOrder));

        DBCursor cursor = collection.find(query).limit(pageSize).skip((pageNumber - 1) * pageSize).sort(orderBy);
        List<Map<String, Object>> list = GGDBCursor.find(cursor);

        if(ObjectUtils.isNotNull(list)) {
            Set<Long> accountIds = Sets.newHashSet();
            for(Map<String, Object> map:list) {
                Long accountId = NumberUtils.createLong(map.get("account_id").toString());
                if(!Arrays.asList(0L, 1L,2L).contains(accountId)) {
                    accountIds.add(accountId);
                }
            }
            Map<Long, String> accounts = obtainAccounts(accountIds);

            for(Map<String, Object> map:list) {
                //账号或者推送类型
                Long accountId = NumberUtils.createLong(map.get("account_id").toString());
                //产品线
                Integer productLine = NumberUtils.createInteger(map.get("source").toString());
                //消息类型
                Integer msgType = NumberUtils.createInteger(map.get("msg_type").toString());
                if(Arrays.asList(-1L, 0L, 1L,2L).contains(accountId)) {
                    accountIds.add(accountId);
                }
                if(Arrays.asList(-1L,1L,2L,3L).contains(accountId)) {
                    map.put("account_name", MsgUserTypeEnum.fromMsgUserName(accountId));
                } else {
                    map.put("account_name", accounts.get(accountId));
                }

                map.put("source", ProductEnum.fromProductName(productLine));
                map.put("msg_type", MsgTypeEnum.fromMsgName(msgType));
            }
        }
        JSONObject json = new JSONObject();
        json.put("rows", list);
        json.put("total", count);
        System.out.println(json.toJSONString());
        renderJSON(json);
    }

立小言先森

关注

4
点赞
踩
35

收藏

觉得还不错? 一键收藏
9
评论
Bootstrap-table实现查询、分页、导出、参数设置及前后端代码示例详解

官方文档可以参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6 页面效果图： - 要控制左侧的复选框按钮属性设置： checkbox: false,控制内容下拉列中是否显示的属性设置：visible: false后端代码要返回查询符合条件的总条数...
复制链接

扫一扫