转自：https://blog.csdn.net/cs_hnu_scw/article/details/80718467#commentBox
情景引入：
小白：起床起床，，，快起床！！！
我：怎么怎么了，小白你到底又怎么了。。
小白：我发现在Web系统中，分页是一种很常见的功能，可是，我之前写的方法都比较麻烦，移植性不是很高，有没有什么好办法可以快速实现分页的呢？
我：确实是的，分页功能几乎在每个系统中都是存在的，它的实现也是有很多种方式的。
小白：对呀，有没有什么好方法呢？
我：这个嘛，对于分页来说的话，其实我们在复杂的系统中，有很多特别的处理，这些都是需要我们进行自定义的编写处理的。但是，如果你就想实现一种分页效果的话，我可以给你提提建议。
小白：好哟，赶紧说赶紧说！！
我：害我又没有懒觉睡，真是的。那接下来，我跟你说说用一种分页插件如何进行快速实现分页效果吧。
情景分析：
我们在任何的系统中，分页功能是必不可少的。然而，对于这个功能如果有一种快速开发的实现方式，当然可以节省我们很多的时间了。接下来，我就给大家基于不同的环境来说说如何使用一个分页插件：pagehelper。。不过，大家可要记住了，对于不同的情况，都要认真分析场景，而不是只会套用哦。。当然，如果你想用最原始的方式实现，也是可以的，我也写了两种方法，会在讲解完后，贴到后面，如果有需要的就进行稍微查看即可（但是，不是非常理想，仅供参考）。
情景一：（SpringBoot 和 Mybatis环境）
方法一：使用pagehelper-spring-boot-starter的形式（最简单和通用的方式）
使用步骤：
（1）在pom.xml文件中引入依赖库
-
<!-- 分页插件 -->
-
<dependency>
-
<groupId>com.github.pagehelper</groupId>
-
<artifactId>pagehelper-spring-boot-starter</artifactId>
-
<version>
1.2.3</version>
-
</dependency>
（2）在application.properties中添加分页配置
-
# 配置pageHelper分页插件的内容
-
pagehelper.helper-dialect=mysql
-
pagehelper.reasonable=
true
-
pagehelper.support-methods-arguments=
true
-
pagehelper.params=count=countSql
或者在application.yml文件中添加分页配置
-
pagehelper:
-
helperDialect: mysql
-
reasonable:
true
-
supportMethodsArguments:
true
-
params: count=countSql
（3）进行使用。（可以在controller层或者service层使用即可）
-
/**
-
* 查询所有的person内容
-
* @return
-
*/
-
@RequestMapping(value =
"/list")
-
public String jumpJsp(Map<String, Object> result){
-
PageHelper.startPage(
3 ,
3);
-
List<Person> personList = personService.findPerson();
-
//得到分页的结果对象
-
PageInfo<Person> personPageInfo =
new PageInfo<>(personList);
-
//得到分页中的person条目对象
-
List<Person> pageList = personPageInfo.getList();
-
//将结果存入map进行传送
-
result.put(
"pageInfo" , pageList);
-
return
"person_list";
-
}
解析：
（1）PageHelper.startPage（pageNum ， pageSize），这个方法就是类似我们数据库操作的limit start ， count
（2）得到的对象PageInfo里面包含很多的字段信息，这个可以自己看源码，非常详细
（3）如果我们只想得到分页处理之后我们的实体对象的结果，那么就调用PageInfo对象的getList（）方法即可。
（4）这种配置使用的方式是最通用的方式，也就是对于环境搭建不同方式都可以利用这种使用方法。
问题：如果运行时出现，org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.github.pagehelper.autoconfigure.PageHelperAutoConfiguration': 这个错误。
解决办法：这是由于分页插件pagehelper的版本和mybatis不兼容的原因，修改分页插件的版本即可。
方法二：使用最原始的形式（SpringBoot+Mybatis配置文件的形式，也就是整合环境还是利用xml的形式搭建的，但是都是通过@configuration注解开发类）
使用步骤：
（1）在pom.xml文件中，添加分页插件的依赖（注意和第一种方法的区别）
-
<!-- 分页插件 -->
-
<dependency>
-
<groupId>com.github.pagehelper</groupId>
-
<artifactId>pagehelper</artifactId>
-
<version>
4.1.6</version>
-
</dependency>
（2）在mybatis的配置文件中添加如下的插件
-
<!-- 配置mybatis的分页插件PageHelper -->
-
<plugins>
-
<!-- com.github.pagehelper为PageHelper类所在包名 -->
-
<plugin interceptor=
"com.github.pagehelper.PageHelper">
-
<!-- 设置数据库类型Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库 -->
-
<property name=
"dialect" value=
"mysql"/>
-
</plugin>
-
</plugins>
（3）在controller或者service层进行使用插件
-
/**
-
* 查询所有的person内容
-
* @return
-
*/
-
@RequestMapping(value =
"/list")
-
public String jumpJsp(Map<String, Object> result){
-
PageHelper.startPage(
1 ,
5);
-
List<Person> personList = personService.findPerson();
-
//得到分页的结果对象
-
PageInfo<Person> personPageInfo =
new PageInfo<>(personList);
-
//得到分页中的person条目对象
-
List<Person> pageList = personPageInfo.getList();
-
//将结果存入map进行传送
-
result.put(
"pageInfo" , pageList);
-
return
"person_list";
-
}
方法三：使用最原始的方式（SpringBoot+Mybatis搭建中，Mybatis是利用在application.properties进行设置，并且mapper文件的操作还是使用.xml形式编写的sql语句，而非mapper注解编写）
使用步骤：
（1）在pom.xml文件中添加分页插件的依赖
-
<!-- 分页插件 -->
-
<dependency>
-
<groupId>com.github.pagehelper</groupId>
-
<artifactId>pagehelper</artifactId>
-
<version>
4.1.6</version>
-
</dependency>
（2）添加下面一个类
-
package com.hnu.scw.config;
-
-
import com.github.pagehelper.PageHelper;
-
import org.apache.ibatis.plugin.Interceptor;
-
import org.mybatis.spring.SqlSessionFactoryBean;
-
import org.springframework.context.annotation.Bean;
-
import org.springframework.context.annotation.Configuration;
-
-
import java.util.Properties;
-
-
/**
-
* @ Author ：scw
-
* @ Date ：Created in 下午 2:48 2018/6/17 0017
-
* @ Description：用于配置分页插件的使用
-
* @ Modified By：
-
* @Version: $version$
-
*/
-
@Configuration
-
public
class PgeHeplerConfig {
-
//将分页插件注入到容器中
-
@Bean
-
public PageHelper pageHelper() {
-
//分页插件
-
PageHelper pageHelper =
new PageHelper();
-
Properties properties =
new Properties();
-
properties.setProperty(
"reasonable",
"true");
-
properties.setProperty(
"supportMethodsArguments",
"true");
-
properties.setProperty(
"returnPageInfo",
"check");
-
properties.setProperty(
"params",
"count=countSql");
-
pageHelper.setProperties(properties);
-
-
//添加插件
-
new SqlSessionFactoryBean().setPlugins(
new Interceptor[]{pageHelper});
-
return pageHelper;
-
}
-
-
}
或者如下的代码：
-
package com.hnu.scw.config;
-
import com.github.pagehelper.PageHelper;
-
import org.springframework.context.annotation.Bean;
-
import org.springframework.context.annotation.Configuration;
-
import java.util.Properties;
-
-
/**
-
* @ Author ：scw
-
* @ Date ：Created in 下午 2:48 2018/6/17 0017
-
* @ Description：用于配置分页插件的使用
-
* @ Modified By：
-
* @Version: $version$
-
*/
-
@Configuration
-
public
class PgeHeplerConfig {
-
//将分页插件注入到容器中
-
@Bean
-
public PageHelper pageHelper() {
-
//分页插件
-
PageHelper pageHelper =
new PageHelper();
-
Properties properties =
new Properties();
-
properties.setProperty(
"reasonable",
"true");
-
properties.setProperty(
"supportMethodsArguments",
"true");
-
properties.setProperty(
"helperDialect",
"mysql");
-
properties.setProperty(
"params",
"count=countSql");
-
pageHelper.setProperties(properties);
-
return pageHelper;
-
}
-
-
}
还可以直接在springboot的启动类添加下面的代码即可。（其实都一样的道理，因为上面的类都是用了@Configuration注解配置了的，也就是添加到了容器中）
-
//将分页插件注入到容器中
-
@Bean
-
public PageHelper pageHelper() {
-
//分页插件
-
PageHelper pageHelper =
new PageHelper();
-
Properties properties =
new Properties();
-
properties.setProperty(
"reasonable",
"true");
-
properties.setProperty(
"supportMethodsArguments",
"true");
-
properties.setProperty(
"helperDialect",
"mysql");
-
properties.setProperty(
"params",
"count=countSql");
-
pageHelper.setProperties(properties);
-
return pageHelper;
-
}
（3）直接使用
-
/**
-
* 查询所有的person内容
-
* @return
-
*/
-
@RequestMapping(value =
"/list")
-
public String jumpJsp(Map<String, Object> result){
-
PageHelper.startPage(
1 ,
5);
-
List<Person> personList = personService.findPerson();
-
//得到分页的结果对象
-
PageInfo<Person> personPageInfo =
new PageInfo<>(personList);
-
//得到分页中的person条目对象
-
List<Person> pageList = personPageInfo.getList();
-
//将结果存入map进行传送
-
result.put(
"pageInfo" , pageList);
-
return
"person_list";
-
}
情景二：Spring+SpringMVC+Mybatis+Maven环境
使用步骤：（其实这个就类似情景一种的方式二，换汤不换药）
（1）在pom.xml中添加分页插件的依赖
-
<!-- 分页插件 -->
-
<dependency>
-
<groupId>com.github.pagehelper</groupId>
-
<artifactId>pagehelper</artifactId>
-
<version>
4.1.6</version>
-
</dependency>
（2）在mybatis中的配置文件SqlMapConfig.xml（这个名字是你自己搭建环境所取的，就是配置一些关于Mybatis的配置文件）添加分页插件。
-
<!-- 配置mybatis的分页插件PageHelper -->
-
<plugins>
-
<!-- com.github.pagehelper为PageHelper类所在包名 -->
-
<plugin interceptor=
"com.github.pagehelper.PageHelper">
-
<!-- 设置数据库类型Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库 -->
-
<property name=
"dialect" value=
"mysql"/>
-
</plugin>
-
</plugins>
（3）在controller层或者service实现层中使用分页。
-
/**
-
* 查询所有的person内容
-
* @return
-
*/
-
@RequestMapping(value =
"/list")
-
public String jumpJsp(Map<String, Object> result){
-
PageHelper.startPage(
1 ,
8);
-
List<Person> personList = personService.findPerson();
-
//得到分页的结果对象
-
PageInfo<Person> personPageInfo =
new PageInfo<>(personList);
-
//得到分页中的person条目对象
-
List<Person> pageList = personPageInfo.getList();
-
//将结果存入map进行传送
-
result.put(
"pageInfo" , pageList);
-
return
"person_list";
-
}
总结：
（1）pagehelper插件本身就是基于Mybatis这种框架进行开发的插件。所以，主要都是针对Mybatis数据操作的架构的。
（2）上面描述了多种情况的具体配置方式，都是自身经过实际开发编写的，而且对于不同的情景，各位要理解为什么要这样，这虽然只是讲解了分页插件的使用，当遇到其他插件的时候，都可以类似进行处理。
（3）如果是用到的SSH（Spring+SpringMVC+Hibernate）或者SpringBoot+Hibernate这样的架构的时候，这个插件是无法使用的，就需要自己通过hibernate的形式进行处理，比如可以用HQL语法或者Criteria进行处理即可。毕竟，Hibernate是一种全自动化的数据库操作框架。
下面的内容，是关于原始方式实现分页效果，仅供各位进行参考（其中是通过实例来帮助大家进行分析）
实现方法一：通过自定义分页标签（JSP）
分页，这个功能，我想在很多的系统中，都有用到过吧。这已经是非常非常普通的应用功能了，所以就需要将这个功能能自定义为一个jsp标签的话，那就肯定很方便了。所以下面就说一下，如果实现这个功能。
步骤：
（1）写两个Java类，其中Page，很简单就是一个分页对象，然后NavigationTag这个就是自定义标签的核心映射类了（如果对于这个自定义标签的流程不是很清楚的话，可以看看我之前写的J2EE的知识点中的内容，都很详细介绍了）。
Page：
-
package com.hnuscw.common.utils;
-
import java.util.List;
-
public class Page
<T> {
-
-
private int total;
-
private int page;
-
private int size;
-
private List
<T> rows;
-
public int getTotal() {
-
return total;
-
}
-
public void setTotal(int total) {
-
this.total = total;
-
}
-
public int getPage() {
-
return page;
-
}
-
public void setPage(int page) {
-
this.page = page;
-
}
-
public int getSize() {
-
return size;
-
}
-
public void setSize(int size) {
-
this.size = size;
-
}
-
public List
<T> getRows() {
-
return rows;
-
}
-
public void setRows(List
<T> rows) {
-
this.rows = rows;
-
}
-
-
}
Navigation：
-
package com.hnuscw.common.utils;
-
import java.io.IOException;
-
import java.util.Map;
-
import javax.servlet.http.HttpServletRequest;
-
import javax.servlet.jsp.JspException;
-
import javax.servlet.jsp.JspWriter;
-
import javax.servlet.jsp.tagext.TagSupport;
-
import org.apache.taglibs.standard.tag.common.core.UrlSupport;
-
-
/**
-
* 显示格式 上一页 1 2 3 4 5 下一页
-
*/
-
public class NavigationTag extends TagSupport {
-
static final long serialVersionUID = 2372405317744358833L;
-
-
/**
-
* request 中用于保存Page
<E> 对象的变量名,默认为“page”
-
*/
-
private String bean = "page";
-
-
/**
-
* 分页跳转的url地址,此属性必须
-
*/
-
private String url = null;
-
-
/**
-
* 显示页码数量
-
*/
-
private int number = 5;
-
-
@Override
-
public int doStartTag() throws JspException {
-
JspWriter writer = pageContext.getOut();
-
HttpServletRequest request = (HttpServletRequest) pageContext.getRequest();
-
Page page = (Page)request.getAttribute(bean);
-
if (page == null)
-
return SKIP_BODY;
-
url = resolveUrl(url, pageContext);
-
try {
-
//计算总页数
-
int pageCount = page.getTotal() / page.getSize();
-
if (page.getTotal() % page.getSize() > 0) {
-
pageCount++;
-
}
-
writer.print("
<nav>
<ul class=\"pagination\">");
-
//显示“上一页”按钮
-
if (page.getPage() > 1) {
-
String preUrl = append(url, "page", page.getPage() - 1);
-
preUrl = append(preUrl, "rows", page.getSize());
-
writer.print("
<li>
<a href=\"" + preUrl + "\">上一页
</a>
</li>");
-
} else {
-
writer.print("
<li class=\"disabled\">
<a href=\"#\">上一页
</a>
</li>");
-
}
-
//显示当前页码的前2页码和后两页码
-
//若1 则 1 2 3 4 5, 若2 则 1 2 3 4 5, 若3 则1 2 3 4 5,
-
//若4 则 2 3 4 5 6 ,若10 则 8 9 10 11 12
-
int indexPage = (page.getPage() - 2 > 0)? page.getPage() - 2 : 1;
-
for(int i=1; i
<= number && indexPage <= pageCount; indexPage++, i++) {
-
if(
indexPage ==
page.getPage()) {
-
writer.print( "<
li
class=
\"
active\">
<a href=\"#\">"+indexPage+"
<span class=\"sr-only\">(current)
</span>
</a>
</li>");
-
continue;
-
}
-
String pageUrl = append(url, "page", indexPage);
-
pageUrl = append(pageUrl, "rows", page.getSize());
-
writer.print("
<li>
<a href=\"" + pageUrl + "\">"+ indexPage +"
</a>
</li>");
-
}
-
//显示“下一页”按钮
-
if (page.getPage()
< pageCount) {
-
String
nextUrl =
append(url, "
page",
page.getPage() +
1);
-
nextUrl =
append(nextUrl, "
rows",
page.getSize());
-
writer.print("<
li>
<a href=\"" + nextUrl + "\">下一页
</a>
</li>");
-
} else {
-
writer.print("
<li class=\"disabled\">
<a href=\"#\">下一页
</a>
</li>");
-
}
-
writer.print("
</nav>");
-
} catch (IOException e) {
-
e.printStackTrace();
-
}
-
return SKIP_BODY;
-
}
-
-
private String append(String url, String key, int value) {
-
-
return append(url, key, String.valueOf(value));
-
}
-
-
/**
-
* 为url 参加参数对儿
-
*
-
* @param url
-
* @param key
-
* @param value
-
* @return
-
*/
-
private String append(String url, String key, String value) {
-
if (url == null || url.trim().length() == 0) {
-
return "";
-
}
-
-
if (url.indexOf("?") == -1) {
-
url = url + "?" + key + "=" + value;
-
} else {
-
if(url.endsWith("?")) {
-
url = url + key + "=" + value;
-
} else {
-
url = url + "&" + key + "=" + value;
-
}
-
}
-
-
return url;
-
}
-
-
/**
-
* 为url 添加翻页请求参数
-
*
-
* @param url
-
* @param pageContext
-
* @return
-
* @throws javax.servlet.jsp.JspException
-
*/
-
private String resolveUrl(String url, javax.servlet.jsp.PageContext pageContext) throws JspException{
-
//UrlSupport.resolveUrl(url, context, pageContext)
-
Map params = pageContext.getRequest().getParameterMap();
-
for (Object key:params.keySet()) {
-
if ("page".equals(key) || "rows".equals(key)) continue;
-
Object value = params.get(key);
-
if (value == null) continue;
-
if (value.getClass().isArray()) {
-
url = append(url, key.toString(), ((String[])value)[0]);
-
} else if (value instanceof String) {
-
url = append(url, key.toString(), value.toString());
-
}
-
}
-
return url;
-
}
-
-
/**
-
* @return the bean
-
*/
-
public String getBean() {
-
return bean;
-
}
-
-
/**
-
* @param bean the bean to set
-
*/
-
public void setBean(String bean) {
-
this.bean = bean;
-
}
-
-
/**
-
* @return the url
-
*/
-
public String getUrl() {
-
return url;
-
}
-
-
/**
-
* @param url the url to set
-
*/
-
public void setUrl(String url) {
-
this.url = url;
-
}
-
-
public void setNumber(int number) {
-
this.number = number;
-
}
-
-
}
（2）编写自定义标签的tld，命令为commons.tld，并且放在WEB-INF下面的tld文件下（这个文件自己创建就是了）
-
<?xml version="1.0" encoding="UTF-8" ?>
-
<!DOCTYPE taglib
-
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
-
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
-
<taglib>
-
<tlib-version>2.0
</tlib-version>
-
<jsp-version>1.2
</jsp-version>
-
<short-name>common
</short-name>
-
<uri>http://hnuscw.com/common/
</uri>
-
<display-name>Common Tag
</display-name>
-
<description>Common Tag library
</description>
-
-
<tag>
-
<name>page
</name>
-
<tag-class>com.hnuscw.common.utils.NavigationTag
</tag-class>
-
<body-content>JSP
</body-content>
-
<description>create navigation for paging
</description>
-
<attribute>
-
<name>bean
</name>
-
<rtexprvalue>true
</rtexprvalue>
-
</attribute>
-
<attribute>
-
<name>number
</name>
-
<rtexprvalue>true
</rtexprvalue>
-
</attribute>
-
<attribute>
-
<name>url
</name>
-
<required>true
</required>
-
<rtexprvalue>true
</rtexprvalue>
-
</attribute>
-
</tag>
-
</taglib>
（3）在jsp页面中进行使用
引入标签：
<%@ taglib prefix="hnuscw" uri="http://hnuscw.com/common/"%>
-
<div class="col-md-12 text-right">
-
<hnuscw:page url="${pageContext.request.contextPath }/customer/list.action" />
-
</div>
测试实例：为了方便很多的使用，我这就还是用一个实际的例子还显示这个效果吧。
jsp页面：命名为：customer.jsp（当然可以不要这么多内容，自行更改即可，只是这个就相当于一个管理系统的了，所以以后只需要稍微修改就可以）
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding=
"UTF-8"%>
-
<%@ page trimDirectiveWhitespaces="true"%>
-
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
-
<%@ taglib prefix="itcast" uri="http://itcast.cn/common/"%>
-
<%
-
String path = request.getContextPath();
-
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
-
+ path + "/";
-
%>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta charset="utf-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<meta name="description" content="">
-
<meta name="author" content="">
-
-
<title>客户列表-BootCRM
</title>
-
-
<!-- Bootstrap Core CSS -->
-
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
-
-
<!-- MetisMenu CSS -->
-
<link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet">
-
-
<!-- DataTables CSS -->
-
<link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet">
-
-
<!-- Custom CSS -->
-
<link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet">
-
-
<!-- Custom Fonts -->
-
<link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet"
-
type=
"text/css">
-
<link href="<%=basePath%>css/boot-crm.css" rel="stylesheet"
-
type=
"text/css">
-
-
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-
<!--[if lt IE 9]>
-
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-
<![endif]-->
-
-
</head>
-
-
<body>
-
<div id="wrapper">
-
-
<!-- Navigation -->
-
<nav class="navbar navbar-default navbar-static-top" role="navigation"
-
style=
"margin-bottom: 0">
-
<div class="navbar-header">
-
<button type="button" class="navbar-toggle" data-toggle="collapse"
-
data-target=
".navbar-collapse">
-
<span class="sr-only">Toggle navigation
</span>
<span
-
class=
"icon-bar">
</span>
<span class="icon-bar">
</span>
<span
-
class=
"icon-bar">
</span>
-
</button>
-
<a class="navbar-brand" href="index.html">BOOT客户管理系统 v2.0
</a>
-
</div>
-
<!-- /.navbar-header -->
-
-
<ul class="nav navbar-top-links navbar-right">
-
<li class="dropdown">
<a class="dropdown-toggle"
-
data-toggle=
"dropdown"
href=
"#">
<i class="fa fa-envelope fa-fw">
</i>
-
<i class="fa fa-caret-down">
</i>
-
</a>
-
<ul class="dropdown-menu dropdown-messages">
-
<li>
<a href="#">
-
<div>
-
<strong>令狐冲
</strong>
<span class="pull-right text-muted">
-
<em>昨天
</em>
-
</span>
-
</div>
-
<div>今天晚上向大哥找我吃饭，讨论一下去梅庄的事...
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a class="text-center" href="#">
<strong>查看全部消息
</strong>
-
<i class="fa fa-angle-right">
</i>
-
</a>
</li>
-
</ul>
<!-- /.dropdown-messages -->
</li>
-
<!-- /.dropdown -->
-
<li class="dropdown">
<a class="dropdown-toggle"
-
data-toggle=
"dropdown"
href=
"#">
<i class="fa fa-tasks fa-fw">
</i>
-
<i class="fa fa-caret-down">
</i>
-
</a>
-
<ul class="dropdown-menu dropdown-tasks">
-
<li>
<a href="#">
-
<div>
-
<p>
-
<strong>任务 1
</strong>
<span class="pull-right text-muted">完成40%
</span>
-
</p>
-
<div class="progress progress-striped active">
-
<div class="progress-bar progress-bar-success"
-
role=
"progressbar"
aria-valuenow=
"40"
aria-valuemin=
"0"
-
aria-valuemax=
"100"
style=
"width: 40%">
-
<span class="sr-only">完成40%
</span>
-
</div>
-
</div>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a href="#">
-
<div>
-
<p>
-
<strong>任务 2
</strong>
<span class="pull-right text-muted">完成20%
</span>
-
</p>
-
<div class="progress progress-striped active">
-
<div class="progress-bar progress-bar-info" role="progressbar"
-
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
-
style=
"width: 20%">
-
<span class="sr-only">完成20%
</span>
-
</div>
-
</div>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a class="text-center" href="#">
<strong>查看所有任务
</strong>
-
<i class="fa fa-angle-right">
</i>
-
</a>
</li>
-
</ul>
<!-- /.dropdown-tasks -->
</li>
-
<!-- /.dropdown -->
-
<li class="dropdown">
<a class="dropdown-toggle"
-
data-toggle=
"dropdown"
href=
"#">
<i class="fa fa-bell fa-fw">
</i>
-
<i class="fa fa-caret-down">
</i>
-
</a>
-
<ul class="dropdown-menu dropdown-alerts">
-
<li>
<a href="#">
-
<div>
-
<i class="fa fa-comment fa-fw">
</i> 新回复
<span
-
class=
"pull-right text-muted small">4分钟之前
</span>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a href="#">
-
<div>
-
<i class="fa fa-envelope fa-fw">
</i> 新消息
<span
-
class=
"pull-right text-muted small">4分钟之前
</span>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a href="#">
-
<div>
-
<i class="fa fa-tasks fa-fw">
</i> 新任务
<span
-
class=
"pull-right text-muted small">4分钟之前
</span>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a href="#">
-
<div>
-
-
class=
"pull-right text-muted small">4分钟之前
</span>
-
</div>
-
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a class="text-center" href="#">
<strong>查看所有提醒
</strong>
-
<i class="fa fa-angle-right">
</i>
-
</a>
</li>
-
</ul>
<!-- /.dropdown-alerts -->
</li>
-
<!-- /.dropdown -->
-
<li class="dropdown">
<a class="dropdown-toggle"
-
data-toggle=
"dropdown"
href=
"#">
<i class="fa fa-user fa-fw">
</i>
-
<i class="fa fa-caret-down">
</i>
-
</a>
-
<ul class="dropdown-menu dropdown-user">
-
<li>
<a href="#">
<i class="fa fa-user fa-fw">
</i> 用户设置
</a>
</li>
-
<li>
<a href="#">
<i class="fa fa-gear fa-fw">
</i> 系统设置
</a>
</li>
-
<li class="divider">
</li>
-
<li>
<a href="login.html">
<i class="fa fa-sign-out fa-fw">
</i>
-
退出登录
</a>
</li>
-
</ul>
<!-- /.dropdown-user -->
</li>
-
<!-- /.dropdown -->
-
</ul>
-
<!-- /.navbar-top-links -->
-
-
<div class="navbar-default sidebar" role="navigation">
-
<div class="sidebar-nav navbar-collapse">
-
<ul class="nav" id="side-menu">
-
<li class="sidebar-search">
-
<div class="input-group custom-search-form">
-
<input type="text" class="form-control" placeholder="查询内容...">
-
<span class="input-group-btn">
-
<button class="btn btn-default" type="button">
-
<i class="fa fa-search" style="padding: 3px 0 3px 0;">
</i>
-
</button>
-
</span>
-
</div>
<!-- /input-group -->
-
</li>
-
<li>
<a href="customer.action" class="active">
<i
-
class=
"fa fa-edit fa-fw">
</i> 客户管理
</a>
</li>
-
<li>
<a href="salevisit.action">
<i
-
class=
"fa fa-dashboard fa-fw">
</i> 客户拜访
</a>
</li>
-
</ul>
-
</div>
-
<!-- /.sidebar-collapse -->
-
</div>
-
<!-- /.navbar-static-side -->
</nav>
-
-
<div id="page-wrapper">
-
<div class="row">
-
<div class="col-lg-12">
-
<h1 class="page-header">客户管理
</h1>
-
</div>
-
<!-- /.col-lg-12 -->
-
</div>
-
<!-- /.row -->
-
<div class="panel panel-default">
-
<div class="panel-body">
-
<form class="form-inline" action="${pageContext.request.contextPath }/customer/list.action" method="get">
-
<div class="form-group">
-
<label for="customerName">客户名称
</label>
-
<input type="text" class="form-control" id="customerName" value="${custName }" name="custName">
-
</div>
-
<div class="form-group">
-
<label for="customerFrom">客户来源
</label>
-
<select class="form-control" id="customerFrom" placeholder="客户来源" name="custSource">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${fromType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custSource}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
<div class="form-group">
-
<label for="custIndustry">所属行业
</label>
-
<select class="form-control" id="custIndustry" name="custIndustry">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${industryType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custIndustry}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
<div class="form-group">
-
<label for="custLevel">客户级别
</label>
-
<select class="form-control" id="custLevel" name="custLevel">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${levelType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custLevel}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
<button type="submit" class="btn btn-primary">查询
</button>
-
</form>
-
</div>
-
</div>
-
<div class="row">
-
<div class="col-lg-12">
-
<div class="panel panel-default">
-
<div class="panel-heading">客户信息列表
</div>
-
<!-- /.panel-heading -->
-
<table class="table table-bordered table-striped">
-
<thead>
-
<tr>
-
<th>ID
</th>
-
<th>客户名称
</th>
-
<th>客户来源
</th>
-
<th>客户所属行业
</th>
-
<th>客户级别
</th>
-
<th>固定电话
</th>
-
<th>手机
</th>
-
<th>操作
</th>
-
</tr>
-
</thead>
-
<tbody>
-
<c:forEach items="${page.rows}" var="row">
-
<tr>
-
<td>${row.cust_id}
</td>
-
<td>${row.cust_name}
</td>
-
<td>${row.cust_source}
</td>
-
<td>${row.cust_industry}
</td>
-
<td>${row.cust_level}
</td>
-
<td>${row.cust_phone}
</td>
-
<td>${row.cust_mobile}
</td>
-
<td>
-
<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#customerEditDialog" onclick="editCustomer(${row.cust_id})">修改
</a>
-
<a href="#" class="btn btn-danger btn-xs" onclick="deleteCustomer(${row.cust_id})">删除
</a>
-
</td>
-
</tr>
-
</c:forEach>
-
</tbody>
-
</table>
-
<div class="col-md-12 text-right">
-
<itcast:page url="${pageContext.request.contextPath }/customer/list.action" />
-
</div>
-
<!-- /.panel-body -->
-
</div>
-
<!-- /.panel -->
-
</div>
-
<!-- /.col-lg-12 -->
-
</div>
-
</div>
-
<!-- /#page-wrapper -->
-
-
</div>
-
<!-- 客户编辑对话框 -->
-
<div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"
-
aria-labelledby=
"myModalLabel">
-
<div class="modal-dialog" role="document">
-
<div class="modal-content">
-
<div class="modal-header">
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-
<span aria-hidden="true">×
</span>
-
</button>
-
<h4 class="modal-title" id="myModalLabel">修改客户信息
</h4>
-
</div>
-
<div class="modal-body">
-
<form class="form-horizontal" id="edit_customer_form">
-
<input type="hidden" id="edit_cust_id" name="cust_id"/>
-
<div class="form-group">
-
<label for="edit_customerName" class="col-sm-2 control-label">客户名称
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_customerName" placeholder="客户名称" name="cust_name">
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_customerFrom" style="float:left;padding:7px 15px 0 27px;">客户来源
</label>
-
<div class="col-sm-10">
-
<select class="form-control" id="edit_customerFrom" placeholder="客户来源" name="cust_source">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${fromType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custSource}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_custIndustry" style="float:left;padding:7px 15px 0 27px;">所属行业
</label>
-
<div class="col-sm-10">
-
<select class="form-control" id="edit_custIndustry" name="cust_industry">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${industryType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custIndustry}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_custLevel" style="float:left;padding:7px 15px 0 27px;">客户级别
</label>
-
<div class="col-sm-10">
-
<select class="form-control" id="edit_custLevel" name="cust_level">
-
<option value="">--请选择--
</option>
-
<c:forEach items="${levelType}" var="item">
-
<option value="${item.dict_id}"<c:if test="${item.dict_id == custLevel}"> selected
</c:if>>${item.dict_item_name }
</option>
-
</c:forEach>
-
</select>
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_linkMan" class="col-sm-2 control-label">联系人
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_linkMan" placeholder="联系人" name="cust_linkman">
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_phone" class="col-sm-2 control-label">固定电话
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_phone" placeholder="固定电话" name="cust_phone">
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_mobile" class="col-sm-2 control-label">移动电话
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_mobile" placeholder="移动电话" name="cust_mobile">
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_zipcode" class="col-sm-2 control-label">邮政编码
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_zipcode" placeholder="邮政编码" name="cust_zipcode">
-
</div>
-
</div>
-
<div class="form-group">
-
<label for="edit_address" class="col-sm-2 control-label">联系地址
</label>
-
<div class="col-sm-10">
-
<input type="text" class="form-control" id="edit_address" placeholder="联系地址" name="cust_address">
-
</div>
-
</div>
-
</form>
-
</div>
-
<div class="modal-footer">
-
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
-
<button type="button" class="btn btn-primary" onclick="updateCustomer()">保存修改
</button>
-
</div>
-
</div>
-
</div>
-
</div>
-
<!-- /#wrapper -->
-
-
<!-- jQuery -->
-
<script src="<%=basePath%>js/jquery.min.js">
</script>
-
-
<!-- Bootstrap Core JavaScript -->
-
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
