您现在的位置:首页 >> 前端 >> 内容

分页

时间:2016/12/17 9:31:00 点击:

  核心提示:效果图: 步骤如下:1、创建两个实体类package com.learning.po.page;public class Page { /*当前页数*/ private int currentPage...

效果图:

分页

步骤如下:

1、创建两个实体类

package com.learning.po.page;

public class Page {
	/*当前页数*/
	private int currentPage;
	/*页面大小*/
	private int pageSize;
	/*总条数*/
	private int total;

	public int getCurrentPage() {
		return currentPage;
	}

	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}
	
	public Integer getTotalPage(){
		return this.total % this.pageSize == 0 ? this.total / this.pageSize : this.total / this.pageSize + 1;
	}

}
package com.learning.po.page;

public class Book {

	private Integer id;
	
	private String code;
	
	private String name;

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

2、编写mapping

<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd" >  
<mapper namespace="com.learning.dao.page.BookMapper" >  
  <resultMap id="BaseResultMap" type="com.learning.po.page.Book" >  
    <id column="id" property="id" jdbcType="INTEGER" />  
    <result column="code" property="code" jdbcType="VARCHAR" />  
    <result column="name" property="name" jdbcType="VARCHAR" />  
  </resultMap>  
    
  <select id="query" resultMap="BaseResultMap">  
    select * from book limit #{current},#{pagesize}  
  </select>  
    
  <select id="total" resultType="java.lang.Integer">  
    select count(*) as c from book  
  </select>  
    
</mapper>

3、编写dao

package com.learning.dao.page;  
  
import java.util.List;  
  
import org.apache.ibatis.annotations.Param;  
  
import com.learning.po.page.Book;  
  
public interface BookMapper {  
  
    List<Book> query(@Param("current") Integer current, @Param("pagesize") Integer pagesize);  
      
    int total();  
      
}
4、编写serviceImpl
package com.learning.service.page.impl;

import java.util.List;

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

import com.learning.dao.page.BookMapper;
import com.learning.po.page.Book;
import com.learning.service.page.BookService;

@Transactional
@Service("bookService")
public class BookServiceImpl implements BookService {

	@Autowired
	private BookMapper bookMapper;
	
	@Override
	public List<book> query(Integer current, Integer pagesize) {
		return bookMapper.query(current, pagesize);
	}

	@Override
	public int total() {
		return bookMapper.total();
	}

}

5、编写service

package com.learning.service.page;

import java.util.List;

import com.learning.po.page.Book;

public interface BookService {

	List<book> query(Integer current, Integer pagesize);
	
	int total();
}

6、编写basecontroller

package com.learning.core.common;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.ModelAttribute;

import com.learning.po.page.Page;

public class BaseController {

	protected HttpServletRequest request;
	protected HttpServletResponse response;

	@ModelAttribute
	public void setRequest(HttpServletRequest request) {
		this.request = request;
	}

	@ModelAttribute
	public void setResponse(HttpServletResponse response) {
		this.response = response;
	}
	
	public void setPageTotal(Page page) {
		int currentpage = page.getCurrentPage();
		int total = (int) page.getTotalPage();
		int start = 0;
		int end = 0;
		if (total < 6) {
			start = 1;
			end = start + total - 1;
		} else {
			start = currentpage - 2;
			if (start < 1) {
				start = 1;
			}
			end = start + 4;
			if (end > total) {
				end = total;
				start = end - 4;
			}
		}
		String pagetotal = "";
		for (int i = start; i <= end; i++) {
			if ("".equals(pagetotal)) {
				pagetotal = i + "";
			} else {
				pagetotal += "," + i;
			}
		}
		request.setAttribute("end", end);
		request.setAttribute("pagetotal", pagetotal);
	}
	
	public Page setPage() {
		String pagesize = request.getParameter("pageSize");
		String currentPage = request.getParameter("currentPage");
		Page page = new Page();
		page.setPageSize((pagesize == null) ? 1 : Integer.parseInt(pagesize));
		page.setCurrentPage((currentPage == null) ? 1 : Integer.parseInt(currentPage));
		request.setAttribute("page", page);
		return page;
	}
	
}

7、编写controller

package com.learning.controller.page;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.learning.core.common.BaseController;
import com.learning.po.page.Book;
import com.learning.po.page.Page;
import com.learning.service.page.BookService;

@Controller
@RequestMapping("/bookController")
public class BookController extends BaseController {
	
	@Autowired
	private BookService bookService;

	@RequestMapping("/query")
	public String query() {
		Page page = super.setPage();
		page.setTotal(bookService.total());
		super.setPageTotal(page);
		int start = (page.getCurrentPage() - 1) * page.getPageSize();
		
		List<book> books = bookService.query(start, page.getPageSize());
		super.request.setAttribute("books", books);
		return "/page/book_list";
	}
}

8、jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c"%>  
<%@ taglib tagdir="/WEB-INF/tags" prefix="p" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link href="${ctx}/css/bootstrap.min.css" rel="stylesheet" />  
<title>分页</title>  
</head>  
<body>  
    <form id="form" action="${ctx}/bookController/query.do" method="post">  
        <p class="pannel">  
            <p class="pannel-body">  
                <table class="table table-bordered table-hover">  
                    <thead>  
                        <tr>  
                            <th>id</th>  
                            <th>代码</th>  
                            <th>名称</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <c:forEach items="${books}" var="item">  
                            <tr>  
                                <td>${item.id}</td>  
                                <td>${item.code}</td>  
                                <td>${item.name}</td>  
                            </tr>  
                        </c:forEach>  
                    </tbody>  
                </table>  
            </p>  
            <p:page></p:page>  
        </p>  
    </form>  
</body>  
</html>

9、在WEB-INF目录下创建文件夹tags,在tags目录下创建page.tag

<%@ tag language="java" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core"%>  
<style type="text/css">  
#page ul {  
    list-style: none;  
    line-height: 40px;  
}  
  
#page li {  
    display: block;  
    float: left;  
}  
  
#page li a {  
    text-decoration: none;  
    border: 1px solid #d5d5d5;  
    min-width: 20px;  
    margin-right: 5px;  
    padding: 7px 5px;  
}  
  
.on {  
    color: #fff;  
    background: #428bca;  
}  
</style>  
<p id="pagination">  
    <input type="hidden" id="currentPage" name="currentPage"  
        value="${page.currentPage}"> <input type="hidden" id="total"  
        value="${page.getTotalPage()}">  
    <p>  
        <p id="page" style="margin: 0 auto; width: 50%; height: 40px">  
            <ul>  
                <li><c:if test="${page.currentPage eq 1}">  
                        <a>首页</a>  
                    </c:if> <c:if test="${page.currentPage ne 1}">  
                        <a href="javascript:page(1)">首页</a>  
                    </c:if></li>  
                <li><c:if test="${page.currentPage eq 1}">  
                        <a>上一页</a>  
                    </c:if> <c:if test="${page.currentPage ne 1}">  
                        <a href="javascript:page(${page.currentPage - 1})">上一页</a>  
                    </c:if></li>  
                <c:forTokens items="${pagetotal}" delims="," var="item">  
                    <c:if test="${item eq page.currentPage}">  
                        <li><a class="on" href="javascript:page(${item})"  
                            style="padding: 7px 12px">${item}</a></li>  
                    </c:if>  
                    <c:if test="${item ne page.currentPage}">  
                        <li><a href="javascript:page(${item})"  
                            style="padding: 7px 12px">${item}</a></li>  
                    </c:if>  
                </c:forTokens>  
                <c:if test="${page.getTotalPage() gt end + 1}">  
                    <li style="margin-right: 5px"><label>...</label></li>  
                </c:if>  
                <c:if test="${end ne page.getTotalPage()}">  
                <li><a href="javascript:page(${page.getTotalPage()})"  
                    style="padding: 7px 12px">${page.getTotalPage()}</a></li>  
                </c:if>  
                <li><c:if test="${page.currentPage eq page.getTotalPage()}">  
                        <a>下一页</a>  
                    </c:if> <c:if test="${page.currentPage ne page.getTotalPage()}">  
                        <a href="javascript:page(${page.currentPage + 1})">下一页</a>  
                    </c:if></li>  
                <li><c:if test="${page.currentPage eq page.getTotalPage()}">  
                        <a>尾页</a>  
                    </c:if> <c:if test="${page.currentPage ne page.getTotalPage()}">  
                        <a href="javascript:page(${page.getTotalPage()})">尾页</a>  
                    </c:if></li>  
                <li style="line-height: 32px"><input type="text" id="current"  
                    name="current" onkeydown="onlyNum()"  
                    style="height: 32px; width: 50px; margin-top: 4px; margin-right: 5px">  
                </li>  
                <li><a href="javascript:setCurrent()">转到</a></li>  
            </ul>  
  
        </p>  
    </p>  
</p>  
  
<script src="${ctx}/js/jquery-1.11.1.js"></script>  
<script type="text/javascript">  
    window.onload = function() {  
        $('#page ul li a').click(function() {  
            if (!isNaN($(this).text())) {  
                var current = $(this).parent().index();  
                $("ul li").children().removeClass("on");  
                $(this).addClass("on");  
            }  
        });  
    };  
  
    function pagesize() {  
        var form = document.getElementById("form");  
        form.submit();  
    }  
  
    function page(c) {  
        $("#currentPage").val(c);  
        var form = document.getElementById("form");  
        form.submit();  
    }  
  
    function setCurrent() {  
        var current = $("#current").val();  
        var total = $("#total").val();  
        if (current > 0 && current < total + 1) {  
            $("#currentPage").val(current);  
            var form = document.getElementById("form");  
            form.submit();  
        } else {  
            alert("转到页数必须大于零,且小于等于" + total);  
            $("#current").val("");  
        }  
    }  
  
    function onlyNum() {  
        if (!(event.keyCode == 46) && !(event.keyCode == 8)  
                && !(event.keyCode == 37) && !(event.keyCode == 39))  
            if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))  
                event.returnValue = false;  
    }  
</script>

Tags:分页   
作者:网络 来源:a161175619