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: Without server-side pagination With server-side pagination