手把手教你如何玩转插件:分页插件(Pagehelper)

论坛 期权论坛 脚本     
匿名技术用户   2020-12-22 18:44   160   0

情景引入:

小白:起床起床,,,快起床!!!

我:怎么怎么了,小白你到底又怎么了。。

小白:我发现在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";
    }
分析:对于这种方法的话,适用于对整合环境还是通过mybatis.xml的形式,所以,这种是具有针对性的一种情况。

方法三:使用最原始的方式(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>
        <i class="fa fa-upload fa-fw"></i> 服务器重启 <span
         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" οnclick="editCustomer(${row.cust_id})">修改</a>
           <a href="#" class="btn btn-danger btn-xs" οnclick="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" οnclick="updateCustomer()">保存修改</button>
    </div>
   </div>
  </div>
 </div>
 <!-- /#wrapper -->

 <!-- jQuery -->
 <script src="<%=basePath%>js/jquery.min.js"></script>

 <!-- Bootstrap Core JavaScript -->
 <script src="<%=basePath%>js/bootstrap.min.js"></script>

 <!-- Metis Menu Plugin JavaScript -->
 <script src="<%=basePath%>js/metisMenu.min.js"></script>

 <!-- DataTables JavaScript -->
 <script src="<%=basePath%>js/jquery.dataTables.min.js"></script>
 <script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script>

 <!-- Custom Theme JavaScript -->
 <script src="<%=basePath%>js/sb-admin-2.js"></script>
 
 <script type="text/javascript">
  function editCustomer(id) {
   $.ajax({
    type:"get",
    url:"<%=basePath%>customer/edit.action",
    data:{"id":id},
    success:function(data) {
     $("#edit_cust_id").val(data.cust_id);
     $("#edit_customerName").val(data.cust_name);
     $("#edit_customerFrom").val(data.cust_source)
     $("#edit_custIndustry").val(data.cust_industry)
     $("#edit_custLevel").val(data.cust_level)
     $("#edit_linkMan").val(data.cust_linkman);
     $("#edit_phone").val(data.cust_phone);
     $("#edit_mobile").val(data.cust_mobile);
     $("#edit_zipcode").val(data.cust_zipcode);
     $("#edit_address").val(data.cust_address);
     
    }
   });
  }
  function updateCustomer() {
   $.post("<%=basePath%>customer/update.action",$("#edit_customer_form").serialize(),function(data){
    alert("客户信息更新成功!");
    window.location.reload();
   });
  }
  
  function deleteCustomer(id) {
   if(confirm('确实要删除该客户吗?')) {
    $.post("<%=basePath%>customer/delete.action",{"id":id},function(data){
     alert("客户删除更新成功!");
     window.location.reload();
    });
   }
  }
 </script>

</body>

</html>

pojo实体:

customer类代码:(也就是页面中显示的每条数据内容的javabean)

package com.hnuscw.crm.pojo;

import java.util.Date;

public class Customer { 
 private Long cust_id;
 private String cust_name;
 private Long cust_user_id;
 private Long cust_create_id;
 private String cust_source;
 private String cust_industry;
 private String cust_level;
 private String cust_linkman;
 private String cust_phone;
 private String cust_mobile;
 private String cust_zipcode;
 private String cust_address;
 private Date cust_createtime;
 public Long getCust_id() {
  return cust_id;
 }
 public void setCust_id(Long cust_id) {
  this.cust_id = cust_id;
 }
 public String getCust_name() {
  return cust_name;
 }
 public void setCust_name(String cust_name) {
  this.cust_name = cust_name;
 }
 public Long getCust_user_id() {
  return cust_user_id;
 }
 public void setCust_user_id(Long cust_user_id) {
  this.cust_user_id = cust_user_id;
 }
 public Long getCust_create_id() {
  return cust_create_id;
 }
 public void setCust_create_id(Long cust_create_id) {
  this.cust_create_id = cust_create_id;
 }
 public String getCust_source() {
  return cust_source;
 }
 public void setCust_source(String cust_source) {
  this.cust_source = cust_source;
 }
 public String getCust_industry() {
  return cust_industry;
 }
 public void setCust_industry(String cust_industry) {
  this.cust_industry = cust_industry;
 }
 public String getCust_level() {
  return cust_level;
 }
 public void setCust_level(String cust_level) {
  this.cust_level = cust_level;
 }
 public String getCust_linkman() {
  return cust_linkman;
 }
 public void setCust_linkman(String cust_linkman) {
  this.cust_linkman = cust_linkman;
 }
 public String getCust_phone() {
  return cust_phone;
 }
 public void setCust_phone(String cust_phone) {
  this.cust_phone = cust_phone;
 }
 public String getCust_mobile() {
  return cust_mobile;
 }
 public void setCust_mobile(String cust_mobile) {
  this.cust_mobile = cust_mobile;
 }
 public String getCust_zipcode() {
  return cust_zipcode;
 }
 public void setCust_zipcode(String cust_zipcode) {
  this.cust_zipcode = cust_zipcode;
 }
 public String getCust_address() {
  return cust_address;
 }
 public void setCust_address(String cust_address) {
  this.cust_address = cust_address;
 }
 public Date getCust_createtime() {
  return cust_createtime;
 }
 public void setCust_createtime(Date cust_createtime) {
  this.cust_createtime = cust_createtime;
 }  
}

Queryvo类代码:(这个主要就是对于封装分页处理和搜索查询来的)

package com.hnuscw.crm.pojo;
public class QueryVo {

 //客户名称
 private String custName;
 private String custSource;
 private String custIndustry;
 private String custLevel;
 //当前页
 private Integer page;
 //每页数
 private Integer size = 10; 
 //开始行
 private Integer startRow = 0;
 
 
 public Integer getStartRow() {
  return startRow;
 }
 public void setStartRow(Integer startRow) {
  this.startRow = startRow;
 }
 //
 public String getCustName() {
  return custName;
 }
 public void setCustName(String custName) {
  this.custName = custName;
 }
 public String getCustSource() {
  return custSource;
 }
 public void setCustSource(String custSource) {
  this.custSource = custSource;
 }
 public String getCustIndustry() {
  return custIndustry;
 }
 public void setCustIndustry(String custIndustry) {
  this.custIndustry = custIndustry;
 }
 public String getCustLevel() {
  return custLevel;
 }
 public void setCustLevel(String custLevel) {
  this.custLevel = custLevel;
 }
 public Integer getPage() {
  return page;
 }
 public void setPage(Integer page) {
  this.page = page;
 }
 public Integer getSize() {
  return size;
 }
 public void setSize(Integer size) {
  this.size = size;
 }
}

contraoller层:

//入口
 @RequestMapping(value = "/customer/list")
 public String list(QueryVo vo,Model model){
  //因为很多页面中都有搜索内容的处理,所以下面也进行了一点内容的添加,这个可以根据需要进行
  List<BaseDict> fromType = baseDictService.selectBaseDictListByCode("002");//这是为了页面进行搜索选择而增加
  List<BaseDict> industryType = baseDictService.selectBaseDictListByCode("001");//为了页面搜索选择而增加
  List<BaseDict> levelType = baseDictService.selectBaseDictListByCode("006");//为了页面搜索选择而增加
  model.addAttribute("fromType", fromType);
  model.addAttribute("industryType", industryType);
  model.addAttribute("levelType", levelType);
   
  //通过四个条件  查询分页对象(这是分页处理的核心的核心)
  Page<Customer> page = customerService.selectPageByQueryVo(vo);
  model.addAttribute("page", page);
  model.addAttribute("custName", vo.getCustName()); //下面几句话都是为了jsp回显而已
  model.addAttribute("custSource", vo.getCustSource());
  model.addAttribute("custIndustry", vo.getCustIndustry());
  model.addAttribute("custLevel", vo.getCustLevel());
  
  return "customer";// 返回到上面的那个jsp主界面
 }

service接口层:(这里几个都贴出来吧,其实关于分页的主要就是CuestomerService)

搜索条件的service:

package com.hnuscw.crm.service;
import java.util.List;
import com.itheima.crm.pojo.BaseDict;
public interface BaseDictService { 
 //查询
 public List<BaseDict> selectBaseDictListByCode(String code);
}

customer分页对象的service:

package com.hnu.scw.service;
import com.itheima.crm.pojo.Customer;
import com.itheima.crm.pojo.QueryVo;
public interface CustomerService { 
 // 通过四个条件 查询分页对象
 public Page<Customer> selectPageByQueryVo(QueryVo vo);
}

service实现层:

搜索条件的实现层代码:

package com.hnuscw.crm.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.itheima.crm.mapper.BaseDictDao;
import com.itheima.crm.pojo.BaseDict;

@Service
//@Transactional
public class BaseDictServiceImpl implements BaseDictService {
 @Autowired
 private BaseDictDao baseDictDao;

 public List<BaseDict> selectBaseDictListByCode(String code) {
  // TODO Auto-generated method stub
  return baseDictDao.selectBaseDictListByCode(code);
 }
}

分页处理的实现层代码:

package com.itheima.crm.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.itheima.common.utils.Page;
import com.itheima.crm.mapper.CustomerDao;
import com.itheima.crm.pojo.Customer;
import com.itheima.crm.pojo.QueryVo;

/**
 * 客户管理
 * 
 * @author lx
 *
 */
@Service
public class CustomerServiceImpl implements CustomerService {

 @Autowired
 private CustomerDao customerDao;
 // 通过四个条件 查询分页对象
 public Page<Customer> selectPageByQueryVo(QueryVo vo) {
  Page<Customer> page = new Page<Customer>();
  //每页数
  page.setSize(5);
  vo.setSize(5);
  if (null != vo) {
   // 判断当前页
   if (null != vo.getPage()) {
    page.setPage(vo.getPage());
    vo.setStartRow((vo.getPage() -1)*vo.getSize());
   }
   if(null != vo.getCustName() && !"".equals(vo.getCustName().trim())){
    vo.setCustName(vo.getCustName().trim());
   }
   if(null != vo.getCustSource() && !"".equals(vo.getCustSource().trim())){
    vo.setCustSource(vo.getCustSource().trim());
   }
   if(null != vo.getCustIndustry() && !"".equals(vo.getCustIndustry().trim())){
    vo.setCustIndustry(vo.getCustIndustry().trim());
   }
   if(null != vo.getCustLevel() && !"".equals(vo.getCustLevel().trim())){
    vo.setCustLevel(vo.getCustLevel().trim());
   }
   //总条数
   page.setTotal(customerDao.customerCountByQueryVo(vo));
   page.setRows(customerDao.selectCustomerListByQueryVo(vo));
  }
  return page;
 }
}

dao层接口:

搜索处理的dao层:

package com.hnuscw.crm.mapper;
import java.util.List;
import com.itheima.crm.pojo.BaseDict;
public interface BaseDictDao { 
 //查询
 public List<BaseDict> selectBaseDictListByCode(String code);
}
分页处理的dao层:
package com.itheima.crm.mapper;

import java.util.List;

import com.itheima.crm.pojo.Customer;
import com.itheima.crm.pojo.QueryVo;

public interface CustomerDao {
 //总条数
 public Integer customerCountByQueryVo(QueryVo vo);
 //结果集
 public List<Customer> selectCustomerListByQueryVo(QueryVo vo);
 
}

mapper映射:

搜索处理的映射mapper:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.crm.mapper.BaseDictDao">
 <!-- 查询 -->
 <select id="selectBaseDictListByCode" parameterType="String" resultType="BaseDict">
  select * from base_dict where dict_type_code = #{value}
 </select>

</mapper>

分页处理的映射mapper:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.crm.mapper.CustomerDao">
 <!-- //总条数 -->
 <!-- public Integer customerCountByQueryVo(QueryVo vo); private String custName; 
  private String custSource; private String custIndustry; private String custLevel; -->
 <select id="customerCountByQueryVo" parameterType="QueryVo"
  resultType="Integer">
  select count(1) from customer
  <where>
   <if test="custName != null and custName != ''">
    cust_name like "%"#{custName}"%"
   </if>
   <if test="custSource != null and custSource != ''">
    and cust_source = #{custSource}
   </if>
   <if test="custIndustry != null and custIndustry != ''">
    and cust_industry = #{custIndustry}
   </if>
   <if test="custLevel != null and custLevel != ''">
    and cust_level = #{custLevel}
   </if>
  </where>
 </select>
 <!-- //结果集 -->
 <!-- public List<Customer> selectCustomerListByQueryVo(QueryVo vo); -->
 <select id="selectCustomerListByQueryVo" parameterType="QueryVo"
  resultType="Customer">
  select * from customer
  <where>
   <if test="custName != null and custName != ''">
    cust_name like "%"#{custName}"%"
   </if>
   <if test="custSource != null and custSource != ''">
    and cust_source = #{custSource}
   </if>
   <if test="custIndustry != null and custIndustry != ''">
    and cust_industry = #{custIndustry}
   </if>
   <if test="custLevel != null and custLevel != ''">
    and cust_level = #{custLevel}
   </if>
  </where>
  limit #{startRow},#{size}
 </select>
</mapper>

PS:(1)上面的代码加上对自定义标签的使用的话,就实现了分页内容的处理了,所以,如果需要使用的话就可以根据这样的内容进行处理即可。此外,上面的jsp中是有条件搜索的,所以代码中也加入了对条件搜索的处理,如果你那界面只是想实现分页处理的话,那么在每个层次中将条件处理的代码删除即可,这样也不会进行影响,关键还是要看懂代码,如果看懂了的话,还是很好进行处理的。当然,这并不是最优化的情况,还能够进行处理,只是这是一种方法而已。

(2)如果要使用上面的jsp代码的话, 要先配置一下下面的内容,对内容进行放行处理.

实现方法二:通过JSP控制分页处理的方法

分析:在第二点中提到了分页的方法,主要是利用jstl中的自定义标签来实现的,接下来的话,介绍一下另外一种方法,就是如何利用jsp页面来控制分页的处理方法。

步骤:(1)编写jsp中的分页内容代码(这里主要就是写一下分页的页面界面和当页数过多的时候如何进行处理的问题)

<!-- 分页内容的处理部分 -->
      <td style="vertical-align:top;">
       <div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">
        <ul>
         <li><a>共<font color=red>${page.totalResult}</font>条</a></li>
         <li><input type="number" value="" id="jumpPageNumber" style="width:50px;text-align:center;float:left" placeholder="页码"/></li>
         <li style="cursor:pointer;"><a οnclick="jumpPage();"  class="btn btn-mini btn-success">跳转</a></li>
         <c:choose>
         <c:when test="${page.currentPage == 1 }"> 
          <li><a>首页</a></li>
          <li><a>上页</a></li>
         <!-- 分是否为第一页的两种情况,不为第一页的话,那么就要设置首页和上一页为有onclick点击事件 -->
         </c:when>
         <c:otherwise>
          <li style="cursor:pointer;"><a οnclick="nextPage(1);">首页</a></li>
          <li style="cursor:pointer;"><a οnclick="nextPage(${page.currentPage}-1);">上页</a></li>
         </c:otherwise>
         </c:choose>
         <!-- 分页处理的优化工作 -->
         <c:choose>
          <c:when test="${page.currentPage + 4 > page.totalPage}">  <!-- 现在每个分页为显示5页 ,所以先判断当前的页面+4是否大于总的页面数-->
           <c:choose>
            <c:when test="${page.totalPage-4 > 0}">   <!-- 判断是否总的页面数也是大于5,因为这样的话,就会出现两种情况 -->
             <c:forEach var="index1" begin="${page.totalPage-4}" end="${page.totalPage}" step="1">
              <c:if test="${index1 >= 1}">
               <c:choose>
                <c:when test="${page.currentPage == index1}">
                 <li><a><b style="color: red;">${page.currentPage}</b></a></li>
                </c:when>
                <c:otherwise>
                 <li style="cursor:pointer;"><a οnclick="changePage(${index1});">${index1}</a></li>            
                </c:otherwise>
               </c:choose>
              </c:if>
             </c:forEach>
            </c:when>
            
            <c:otherwise>  <!-- 当总的页面数都不足5的时候,那么直接全部显示即可,不需要考虑太多 -->
             <c:forEach  var="pagenumber"  begin="1" end="${page.totalPage}">
              <!-- 判断页码是否是当前页,是的话,就换个颜色来标记 -->
              <c:choose>
                <c:when test="${page.currentPage == pagenumber}">
                 <li><a><b style="color: red;">${page.currentPage}</b></a></li>
                </c:when>
                <c:otherwise>
                 <li style="cursor:pointer;"><a οnclick="changePage(${pagenumber});">${pagenumber}</a></li>            
                </c:otherwise>
              </c:choose>    
             </c:forEach>
            </c:otherwise>
           </c:choose>
           
          </c:when>
          
          <c:otherwise>  <!-- 当当前页面数+4都还是小于总的页面数的情况 -->
           <c:choose>
            <c:when test="${page.currentPage != 1}"> <!-- 判断当前页面是否就是第一页,因为这样也会有两种情况的处理 -->            
              <c:forEach var="index2" begin="${page.currentPage-1}" end="${page.currentPage+3}"> <!-- 从当前页面减一的页面数开始,这样点击前面一页就会显示其他的页面,从而实现页面跳转 -->
               <c:choose>
                <c:when test="${page.currentPage == index2}">
                 <li><a><b style="color: red;">${page.currentPage}</b></a></li>
                </c:when>
                <c:otherwise>
                 <li style="cursor:pointer;"><a οnclick="changePage(${index2});">${index2}</a></li>            
                </c:otherwise> 
               </c:choose>          
              </c:forEach>            
            </c:when>
            
            <c:otherwise> <!-- 当当前页面数就是第一页的时候,就直接显示1-5页即可 -->           
             <c:forEach var="index3" begin="1" end="5">
              <c:choose>
               <c:when test="${page.currentPage == index3}">
                <li><a><b style="color: red;">${page.currentPage}</b></a></li>
               </c:when>
               <c:otherwise>
                <li style="cursor:pointer;"><a οnclick="changePage(${index3});">${index3}</a></li>            
               </c:otherwise>
              </c:choose>
             </c:forEach>             
            </c:otherwise>            
           </c:choose>
          </c:otherwise>
         </c:choose>         
         <!-- 处理 当前页是否最后一页,不是的话,就需要添加下一页的点击时间-->
         <c:choose>
          <c:when test="${page.currentPage == page.totalPage }">
           <li><a>下页</a></li>
           <li><a>尾页</a></li>
          </c:when>
          <c:otherwise>
           <li style="cursor:pointer;"><a οnclick="nextPage(${page.currentPage}+1)">下页</a></li>
           <li style="cursor:pointer;"><a οnclick="nextPage(${page.totalPage});">尾页</a></li>
          </c:otherwise>      
         </c:choose>
          
         <!-- 处理 页面大小的处理-->
         <li><a>第${page.currentPage}页</a></li>
         <li><a>共${page.totalPage}页</a></li>
         <!-- 进行每一个页面显示数据条目大小的选择 -->
         <li>
         <!-- 注意:当进行选择改变的时候,就会出发changeCount这个事件,再通过Ajax进行页面数据的请求 -->
         <select title='显示条数' style="width:55px;float:left;" οnchange="changeCount(this.value)">
         <option value="${page.showCount}">${page.showCount}</option>
         <option value='5'>5</option>
         <option value='10'>10</option>
         <option value='20'>20</option>
         <option value='30'>30</option>
         <option value='40'>40</option>
         <option value='50'>50</option>
         <option value='60'>60</option>
         <option value='70'>70</option>
         </select>
         </li>
        </ul>     
       </div>      
      </td>
备注:1:上面是放在一个table标签中的,所以是用td标签来进行标识

2:这里默认的处理是每一个分页是分5页内容,如果需要进行变化的话,那么自己进行修改相对应的注释中的内容即可

(2)jsp中的JS代码(用于控制点击页面的跳转处理)

//下面都是分页处理的操作
  //(1)操作1:点击页码进行显示数据
  function changePage(clickpage){ 
   //注意点:
   //(1)这里用ajax进行处理的话会存在问题,因为ajax无法进行页面跳转,所以如果用ajax的话,那么就要回到这个success中进行拼接内容,感觉有点麻烦了。
   //(2)获取搜索框中是否有内容
   var retrieve_content = $('#retrieve_content').val(); 
   //(3)直接重定向带参数过去,currentPage表示将要显示的页面,showCount表示为每页的数据条数
   window.location = "${pageContext.request.contextPath}/asset/asystem_showapprover?currentPage="+clickpage+"&showCount="+${page.showCount}+"&retrieve_content="+ encodeURI(encodeURI(retrieve_content));
    /* $.ajax({
      url:'${pageContext.request.contextPath}/asset/asystem_showapprover',
      data:{"currentPage":clickpage},
      async:true,
      type:"POST",
      success:function(data){
  
      },
      error:function(){
       alert("切换失败!请稍后重试!");
      },
      dataType:"json"
     }); */ 
  }
  //操作2:点击上下页,进行页码内容的改变
  function nextPage(clickpage){
   //(1)获取搜索框中是否有内容
   var retrieve_content = $('#retrieve_content').val(); //后面要注意编码,因为如果是中文的话,这样传会发生乱码的,那么搜索肯定就匹配不到内容
   window.location = "${pageContext.request.contextPath}/asset/asystem_showapprover?currentPage="+clickpage+"&showCount="+${page.showCount}+"&retrieve_content="+ encodeURI(encodeURI(retrieve_content));
  }
  //操作3:选择下拉框的时候,进行页面大小的改变
  function changeCount(pagesize){ 
   //(1)获取搜索框中是否有内容
   var retrieve_content = $('#retrieve_content').val(); //后面要注意编码,因为如果是中文的话,这样传会发生乱码的,那么搜索肯定就匹配不到内容
   window.location = "${pageContext.request.contextPath}/asset/asystem_showapprover?currentPage="+${page.currentPage}+"&showCount="+pagesize+"&retrieve_content="+ encodeURI(encodeURI(retrieve_content));
  }
  //操作4:处理跳转按钮页面的处理
  function jumpPage(){
   //1.获取页码框中的数值大小
   var toPaggeVlue = $('#jumpPageNumber').val();
   //2.对数值进行一些判断,是否符合正常的规范
   if(toPaggeVlue == ''){  //如果是空,就设置为1
    $('#jumpPageNumber').val(1);
    toPaggeVlue =1;
   }
   if(isNaN(Number(toPaggeVlue))){ //如果是非数字,也就设置为1,其实这个在input组件中,已经可以控制了
    $('#jumpPageNumber').val(1); 
    toPaggeVlue =1;
   }
   //3:执行nextPage函数就可以了
   nextPage(toPaggeVlue);
  }

备注:这里就是简单的JS跳转控制的代码了

(3)PgaeOption自定义分页处理的对象(主要就是用于管理分页的内容)

package com.mbfw.entity.assets;
import com.mbfw.util.PageData;
public class PageOption {
 private int showCount; // 每页显示记录数
 private int totalPage; // 总页数
 private int totalResult; // 总记录数
 private int currentPage; // 当前页
 private int currentResult; // 当前记录起始索引
 private PageData pd ;      //封装一个PageData对象,主要是为了能够方便进行检索功能
 
 public PageData getPd() {
  return pd;
 }

 public void setPd(PageData pd) {
  this.pd = pd;
 }

 public PageOption(int showCount , int currentPage){
  this.showCount = showCount;
  this.currentPage = currentPage;
 }
  
 public int getShowCount() {
  return showCount;
 }
 
 public void setShowCount(int showCount) {
  this.showCount = showCount;
 }
 
 public int getTotalPage() {
  if (totalResult % showCount == 0)
   totalPage = totalResult / showCount;
  else
   totalPage = totalResult / showCount + 1;
  return totalPage;
 }
 
 public void setTotalPage(int totalPage) {
  this.totalPage = totalPage;
 }
 
 public int getTotalResult() {
  return totalResult;
 }
 
 public void setTotalResult(int totalResult) {
  this.totalResult = totalResult;
 }
 
 public int getCurrentPage() {
  if (currentPage <= 0)
   currentPage = 1;
  if (currentPage > getTotalPage())
   currentPage = getTotalPage();
  return currentPage;
 }
 
 public void setCurrentPage(int currentPage) {
  this.currentPage = currentPage;
 }
 
 //获取当前页的数据条的索引
 public int getCurrentResult() {
  currentResult = (getCurrentPage() - 1) * getShowCount();
  if (currentResult < 0)
   currentResult = 0;
  return currentResult;
 }
 
 
 public void setCurrentResult(int currentResult) {
  this.currentResult = currentResult;
 }
 
 
}

备注:其中做了一些页面数目的控制的管理,大家应该一看就能够明白含义的。当然,这些控制在controller层或者service层进行管理都可以的哦!!!

(4)controller层代码

@Autowired
 private AssetApproverManageService ams;
 
 //点击审核人员,进行显示所有审核人员信息
 @RequestMapping(value="/asystem_showapprover")
 public ModelAndView showApproverInfo() throws Exception{
  ModelAndView mav  = this.getModelAndView(); 
  PageData pd = this.getPageData();
  List<PageData>  listApprover = new ArrayList<PageData>(); 
  
  PageOption page = new PageOption(5, 1); //默认初始化一进来显示就是每页显示5条,当前页面为1
  //(1)获取是否有传过来需要显示的页面数,如果有,就设置相应的属性
  if(pd.getString("currentPage") != null){
   page.setCurrentPage(Integer.parseInt(pd.getString("currentPage")));
  }
  //(2)获取是否有传过来每个页面显示的条数,如果有,就设置相应的属性
  if(pd.getString("showCount") != null){
   page.setShowCount(Integer.parseInt(pd.getString("showCount")));
  }
  //------没有进行检索的处理-----
  if(pd.getString("retrieve_content") == null || pd.getString("retrieve_content") == ""){
   //(3)查询数据库中数据的总条数
   Integer totalnumber = ams.findTotalDataNumber();
   //(4)设置总的数据条数
   page.setTotalResult(totalnumber); 
   //(5)设置需要显示的数据的索引,其实这有个公式就是为了分页查询limit (currentPage-1)*showcount,showcount即可
   page.setCurrentResult((page.getCurrentPage()-1)*(page.getShowCount()));   
   //(6)查询数据库,返回对应条数的数据
   listApprover = ams.listPdPageApprover(page);
  }
  //--------进行检索处理
  else{
   //(3)获取传送过来的进行检索的内容(这里要解码,因为如果是中文的话就会发生乱码问题)
   pd.put("retrieve_content", URLDecoder.decode(pd.getString("retrieve_content"), "utf-8"));
   //(4)设置分页中需要进行检索的姓名的内容,便于在分页中根据姓名获取内容
   page.setPd(pd);
   //(5)查询对应审核人员姓名的数据总条数
   Integer totalnumber = ams.findNumberBySearchName(page);
   //(6)设置总的数据条数
   page.setTotalResult(totalnumber);
   //(7)设置需要显示的数据的索引
   page.setCurrentResult((page.getCurrentPage()-1)*(page.getShowCount()));   
   //(8)查询数据库,返回对应检索姓名的数据
   listApprover = ams.listSearchNameApprover(page);
  }
  
  mav.addObject("listApprover",listApprover);   //返回对应条数的数据
  mav.addObject("page",page);                  //返回对应的分页的内容
  mav.addObject("deleteresult",pd.getString("delresult"));//返回批量删除操作后的结果 
  mav.addObject("addresult",pd.getString("addresult"));//返回添加审核人员操作后的结果
  mav.setViewName("system/asystem_set/asystem_approver_list");
  return mav;
 }
备注:我这里用了自定义的PageDate对象,如果要用springmvc中的话,就用Model对象就可以了,只是用来返回数据到JSP中而已的。。。因为分页大部分是用于在显示数据的页面中的,所以我这里也是处理显示数据的用途的controller。。另外,我这里面还加入了检索的管理,对于这个部分可以忽略。

(5)service层代码

1:获取数据的总条数

public Integer findTotalDataNumber() throws Exception {  
  return (Integer) dao.findForObject("ApproverManage.findTotalNumber", null);
 }

2:获取对应的分页的内容数据

public List<PageData> listPdPageApprover(PageOption page) throws Exception{ 
  return (List<PageData>) dao.findForList("ApproverManage.approverListPage" ,page);
 }

(6)mybatis层的mapper代码

1:获取数据的总条数(这个随便写,根据自己的需要进行的是查询哪个数据库中的表即可,我这写的只是一个测试例子,告诉你们怎么写格式)

<select id="findTotalNumber" resultType="Integer">
  select count(*)
  from
  sys_approver
 </select>

2:获取分页数据的内容

<select id="approverListPage"  parameterType="com.mbfw.entity.assets.PageOption"  resultType="pd" useCache="false">
   select *
   from sys_approver
   limit #{currentResult},#{showCount}
  </select>

备注:mybatis中的这代码,主要就是告诉大家怎么用的而已,具体的查询哪个表还是根据自己的需要进行替换即可。简单点说,就是查询数据总条数和对应分页中的数据内容即可。。。很容易理解的

总结:针对上面的两种方法,大家可以根据需要进行选择,如果喜欢在JSP控制,就用第二种方法,如果喜欢在service层控制就用第一种即可。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP