Bootstrap Table 初探

luwfls

于 2017-03-08 10:12:39 发布

阅读量324

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap 带搜索条件的分页

本文链接：https://blog.csdn.net/luwfls/article/details/60867598

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景介绍

项目中的一个报表列太多，显示不开，使用Bootstrap Table 带横向滚动轴的表来解决。

参考的教程

http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/

遇到的问题

只显示表结构

只显示表格结构，不显示表格数据。
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
</head>
<body>
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.min.js"></script>
<script src="js2/bootstrap-table.js"></script>
<script>
var data = [{
  "name": "bootstrap-table",
  "counts": {
    "stargazers_count": "526",
    "forks_count": "122"
  }
}, {
  "name": "multiple-select",
  "counts": {
    "stargazers_count": "288",
    "forks_count": "150"
  }
}];
var columns = [
  [{
    "field": "name",
    "title": "Name",
    "colspan": 1,
    "rowspan": 2
  }, {
    "title": "counttitle",
    "colspan": 2,
    "rowspan": 1
  }], 
  [{
    "field": "counts.stargazers_count",
    "title": "Stars",
    "colspan": 1,
    "rowspan": 1
  }, {
    "field": "counts.forks_count",
    "title": "Forks",
    "colspan": 1,
    "rowspan": 1
  }]
];

$(function() {
  $('#table').bootstrapTable({
    data: data,
    columns: columns
  });
});
</script>
<table id="table">
</table>
</body>
</html>

解决方案
下载官方的bootstrap-table.js大小应该为108kb左右，之前使用的有问题的版本51kb，该版本不支持复杂的json结构。如下
官方js下载方法，打开官方教程的demo页面，进入调试模式，将用到的js保存到本地。

[{
  "name": "bootstrap-table",
  "counts": {
    "stargazers_count": "526",
    "forks_count": "122"
  }
}, {
  "name": "multiple-select",
  "counts": {
    "stargazers_count": "288",
    "forks_count": "150"
  }
}];

server端普通分页、带搜索条件的分页

（前提）后台提供支持带搜索条件的分页查询接口
实际开发中使用了Hibernate的SqlQuery对象，使用原生的SQL语句做复杂的报表查询，因为使用HQL或对象导航检索方式，对于复杂的报表需求很难做到对象与表的对应，实际上根本不存在这样的对象。

$(function() {
            $('#table').bootstrapTable({
                url: "/platform/loan-apply-account-data.do",
                columns: columns,
                pagination: true,
                pageNumber:1,
                pageSize:5,
                search:true,
                showColumns:true,
                sidePagination:"server",
                queryParamsType : "limit",
                queryParams: function queryParams(params) {   //设置查询参数
                    var param = {
                        "queryParams.start": params.offset,
                        "queryParams.end": (params.offset+params.limit),
                        "queryParams.key1": params.search,
                        "queryParams.key2": params.search
                    };
                    return param;
                },
            });
        });

luwfls

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap Table 初探

背景介绍项目中的一个报表列太多，显示不开，使用Bootstrap Table 带横向滚动轴的表来解决。参考的教程http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/遇到的问题只显示表格结构，不显示表格数据。代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-
复制链接

扫一扫