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: |