使用spring-mvc,bootstrap-table插件实现分页

项目结构：

运行结果：

(图片看不清楚，右键新标签页中打开图片）

item-list.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'b.jsp' starting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css">
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-table.js" type="text/javascript"></script>
<script src="js/bootstrap-table-zh-CN.js" type="text/javascript"></script>
</head>
<body>
	<table id="mytable" data-toggle="table"
		data-url="http://localhost:8080/mytest/test" data-method="post"
		data-query-params="queryParams" data-toolbar="#toolbar"
		data-pagination="true" data-search="true" data-show-refresh="true"
		data-show-toggle="true" data-show-columns="true"
		data-page-list="[2,4,8,16,ALL]" data-pagination="true"
		data-height="300">
		<thead>
			<tr>
				<th width="70" data-field="itemId">商品ID</th>
				<th width="94" data-field="title">商品标题</th>
				<th width="70" data-field="sellPoint">卖点</th>
		</thead>
	</table>
</body>
</html>

要引入jquery.js，bootstrap的js css，bootstrap-table插件的js css，在这里看似只用了js和css，其实fonts也使用了的，如果没有fonts，bootstrap的图标就无法正常显示！！

以上的data-XX标签都是bootstrap封装好的，详细看文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用该插件分页时有一个很重要的标签，data-side-pagination='client' ，默认值就是这个，所以我没有写，该标签有两个属性client和server 前者表明直接一次性加载完数据，后者是服务端分页，翻到第几页就查询出第几页的数据。它们都要求返回的数据是json类型，而且当该标签属性是server时，返回的json中还要加上两个节点：total和rows

data-field标签相当于id

Mycontroller.java:

package com.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class Mycontroller {
	
	@ResponseBody
	@RequestMapping(value="/test",produces = "application/json;charset=utf-8")
	public String test(){
		/*
		[
		  {
		    "title": "LG 47LA6800-CA 47英寸 全高清智能3D液晶电视 （红色）",
		    "sellPoint": "【疯狂清仓】无边框硬屏，不闪式3D技术，动感应遥控器，“船”型底座设计！仅北京、沈阳、深圳有货！",
		    "itemId": "868462"
		  },
		  {
		    "title": "诺基亚(NOKIA) 1050 (RM-908) 黑色 移动联通2G手机",
		    "sellPoint": "经典神器，简单实用,超长待机，更多色彩！",
		    "itemId": "875722"
		  },
		  {
		    "title": "诺基亚(NOKIA) 1050 (RM-908) 蓝色 移动联通2G手机",
		    "sellPoint": "经典神器，简单实用,超长待机，更多色彩！",
		    "itemId": "875724"
		  }*/
		String a="[{\"title\": \"LG 47LA6800-CA 47英寸 全高清智能3D液晶电视 （红色）\",\"sellPoint\": \"【疯狂清仓】无边框硬屏，不闪式3D技术，动感应遥控器，“船”型底座设计！仅北京、沈阳、深圳有货！\",\"itemId\": \"868462\"},"
				+ "{\"title\": \"诺基亚(NOKIA) 1050 (RM-908) 黑色 移动联通2G手机\",\"sellPoint\": \"经典神器，简单实用,超长待机，更多色彩！\",\"itemId\": \"875722\"},"
				+ "{\"title\": \"诺基亚(NOKIA) 1050 (RM-908) 蓝色 移动联通2G手机\",\"sellPoint\": \"经典神器，简单实用,超长待机，更多色彩！\",\"itemId\": \"875724\"}]";
		return a;
	}
}

模拟的数据，直接返回一个json数组

使用spring-mvc,bootstrap-table插件实现分页

猜你喜欢