1.Without server-side pagination

data-side-pagination="client"(bs-table的设置)

服务器端代码:

@RequestMapping(value ="/toUserList")
@ResponseBody
public JSONArray toWebapp(String name,String password) {

List<UserInfo> userList = new ArrayList<>();
UserInfo userInfo = new UserInfo((long)1,"wl","123");
UserInfo userInfo1 = new UserInfo((long)2,"yq","yq123");
UserInfo userInfo2 = new UserInfo((long)3,"xb","xb123");
userList.add(userInfo);
userList.add(userInfo1);
userList.add(userInfo2);
Map<String, Object> map = new HashMap<String, Object>();
if(userList != null) {
map.put("total", userList.size());
map.put("rows", userList);
}
JSONArray userList1 = JSONArray.fromObject(userList);
//JSONArray fromObject = JSONArray.fromObject(map);

System.out.println(userList1);
return userList1;
}

前段代码:

<div class="container">
<h1>getData</h1>
<div id="toolbar">
<button id="button" class="btn btn-default">getData</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460"
data-side-pagination="client"
data-pagination="true"
data-url="${pageContext.request.contextPath}/user/toUserList.do">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="username">username</th>
<th data-field="userpwd">userpwd</th>
</tr>
</thead>
</table>
</div>

对应的json

[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
}
]

2.With server-side pagination

对应的属性:data-side-pagination="server"

服务端代码:

@RequestMapping(value ="/toUserList")
@ResponseBody
public Map<String, Object> toWebapp(String name,String password) {

List<UserInfo> userList = new ArrayList<>();
UserInfo userInfo = new UserInfo((long)1,"wl","123");
UserInfo userInfo1 = new UserInfo((long)2,"yq","yq123");
UserInfo userInfo2 = new UserInfo((long)3,"xb","xb123");
userList.add(userInfo);
userList.add(userInfo1);
userList.add(userInfo2);
Map<String, Object> map = new HashMap<String, Object>();
if(userList != null) {
map.put("total", userList.size());
map.put("rows", userList);
}
JSONArray userList1 = JSONArray.fromObject(userList);
//JSONArray fromObject = JSONArray.fromObject(map);

System.out.println(userList1);
return map;
}

客户端代码:

<div class="container">
<h1>getData</h1>
<div id="toolbar">
<button id="button" class="btn btn-default">getData</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460"
data-side-pagination="server"
data-pagination="true"
data-url="${pageContext.request.contextPath}/user/toUserList.do">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="username">username</th>
<th data-field="userpwd">userpwd</th>
</tr>
</thead>
</table>
</div>

对应的json

{
"total": 200,
"rows": [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
}
]
}

问题总结:

1.查看英文文档,中午的不细致,看不出问题来。

地址:http://bootstrap-table.wenzhixin.net.cn/documentation/

2.我的错误在于:

url data-url String undefined A URL to request data from remote site. 
Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples:

bootstrap-table 加载不了数据问题总结的更多相关文章

  1. django:bootstrap table加载django返回的数据

    bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...

  2. bootstrap table加载数据

    //html <table id="dailyDevTable"></table> //js $(function () { initTable(); }) ...

  3. [每日一题] OCP1z0-047 :2013-08-17 EXTERNAL TABLE――加载数据 ............................56

    正确答案:C 一.对答案解释: A.       TYPE:有两个选可供选择: 1.        ORACLE_LOADER:传统方式,与SQLLDR一样,参数从多,应用较多. 2.         ...

  4. hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)

    数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...

  5. [原创.数据可视化系列之三]使用Ol3加载大量点数据

    不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...

  6. jsTree 的简单用法--异步加载和刷新数据

    首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...

  7. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  8. 异步加载回来的数据不受JS控制了

    写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...

  9. echarts 图表重新加载,原来的数据依然存在图表上

    问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...

  10. mxnet自定义dataloader加载自己的数据

    实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...

随机推荐

  1. Mac 系统下cocos2dx 环境变量设置

    Mac 系统环境变量设置   vim ~/.bash_profile    export PATH=$PATH:/Users/wangchengcheng/Downloads/LearningSoft ...

  2. IOS第11天(2:UIPickerView自定义国旗选择)

    国旗选择 #import "HMViewController.h" #import "HMFlag.h" #import "HMFlagView.h& ...

  3. [转]JNIEnv解析

    1.关于JNIEnv和JavaVM JNIEnv是一个与线程相关的变量,不同线程的JNIEnv彼此独立.JavaVM是虚拟机在JNI层的代表,在一个虚拟机进程中只有一个JavaVM,因此该进程的所有线 ...

  4. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  5. 记录工作中用到的linux命令

    日常工作中会对centos进行操作,总是会有一些常用的命令记不住,特开一贴,记录那些命令,学而时习之.   RPM操作类命令:   查看RPM安装路径: 1.rpm -qa|grep Memcache ...

  6. CoreAnimation--CALayer的动画

    CoreAnimation--CALayer的动画 核心动画中所有类都遵守CAMediaTiming CAAnaimation和CAPropertyAnimation都是抽象类,本身不具备动画效果,必 ...

  7. Force StyleCop to Ignore a File

    You can quickly force StyleCop to ignore files in a project by manually modifying the project file, ...

  8. Java Servlet(五):GenericServlet与Servlet、HttpServlet之间的关系(jdk7+tomcat7+eclipse)

    本篇主要记录下,对GenericServlet的作用理解,及其与Servlet/HttpServlet之间的关系. 示例完成业务: 1.新建一个login.jsp页面,要求改页面能输入username ...

  9. matlab中动态绘图并保存为视频的小例子

    如题,多的就不说了,先上一个效果: 每隔0.1秒,绿色的直线转动一个角度. 再看看代码如何实现: fuction main clear; clc; %%%%%%%%%%%%%%%%%%%%%%%%%% ...

  10. csuoj 1503: 点到圆弧的距离

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1503 1503: 点到圆弧的距离 时间限制: 1 Sec  内存限制: 128 MB  Speci ...