bootstrap-table 加载不了数据问题总结
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 加载不了数据问题总结的更多相关文章
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- bootstrap table加载数据
//html <table id="dailyDevTable"></table> //js $(function () { initTable(); }) ...
- [每日一题] OCP1z0-047 :2013-08-17 EXTERNAL TABLE――加载数据 ............................56
正确答案:C 一.对答案解释: A. TYPE:有两个选可供选择: 1. ORACLE_LOADER:传统方式,与SQLLDR一样,参数从多,应用较多. 2. ...
- hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)
数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...
- [原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...
- jsTree 的简单用法--异步加载和刷新数据
首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- 异步加载回来的数据不受JS控制了
写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...
- echarts 图表重新加载,原来的数据依然存在图表上
问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...
- mxnet自定义dataloader加载自己的数据
实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...
随机推荐
- Mac 系统下cocos2dx 环境变量设置
Mac 系统环境变量设置 vim ~/.bash_profile export PATH=$PATH:/Users/wangchengcheng/Downloads/LearningSoft ...
- IOS第11天(2:UIPickerView自定义国旗选择)
国旗选择 #import "HMViewController.h" #import "HMFlag.h" #import "HMFlagView.h& ...
- [转]JNIEnv解析
1.关于JNIEnv和JavaVM JNIEnv是一个与线程相关的变量,不同线程的JNIEnv彼此独立.JavaVM是虚拟机在JNI层的代表,在一个虚拟机进程中只有一个JavaVM,因此该进程的所有线 ...
- CSS水平居中
三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...
- 记录工作中用到的linux命令
日常工作中会对centos进行操作,总是会有一些常用的命令记不住,特开一贴,记录那些命令,学而时习之. RPM操作类命令: 查看RPM安装路径: 1.rpm -qa|grep Memcache ...
- CoreAnimation--CALayer的动画
CoreAnimation--CALayer的动画 核心动画中所有类都遵守CAMediaTiming CAAnaimation和CAPropertyAnimation都是抽象类,本身不具备动画效果,必 ...
- Force StyleCop to Ignore a File
You can quickly force StyleCop to ignore files in a project by manually modifying the project file, ...
- Java Servlet(五):GenericServlet与Servlet、HttpServlet之间的关系(jdk7+tomcat7+eclipse)
本篇主要记录下,对GenericServlet的作用理解,及其与Servlet/HttpServlet之间的关系. 示例完成业务: 1.新建一个login.jsp页面,要求改页面能输入username ...
- matlab中动态绘图并保存为视频的小例子
如题,多的就不说了,先上一个效果: 每隔0.1秒,绿色的直线转动一个角度. 再看看代码如何实现: fuction main clear; clc; %%%%%%%%%%%%%%%%%%%%%%%%%% ...
- csuoj 1503: 点到圆弧的距离
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1503 1503: 点到圆弧的距离 时间限制: 1 Sec 内存限制: 128 MB Speci ...