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

来源：互联网发布：安防行业 linux 编辑：程序博客网时间：2024/06/05 16:30

项目结构：

运行结果：

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

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;@Controllerpublic 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数组

阅读全文

2 0