分页显示——（一）

1.思路介绍:

　　先定义一个封装分页数据的泛型工具类，控制层中通过前台传的页数与每页的数量向service要page对象，service层调用dao返回总数并调用dao取出数据(limit关键字)，dao层从数据库中取出service层所需要的数据，并提交给service层。这样就达到分页的效果。数据封装在pageBean的list中

2.PageBean工具类(泛型类)

package utils;
/**
 * 分页工具类
 */

import java.util.ArrayList;
import java.util.List;


public class PageBean<T> {
    
    //当前页
    private int currentPage;
    //当前页显示的条数
    private int currentCount;
    //总条数
    private int totalCount;
    //总页数
    private int totalPage;
    //每页显示的数据
    private List<T> productList = new ArrayList<T>();
    
    
    public int getCurrentPage() {
        return currentPage;
    }
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }
    public int getCurrentCount() {
        return currentCount;
    }
    public void setCurrentCount(int currentCount) {
        this.currentCount = currentCount;
    }
    public int getTotalCount() {
        return totalCount;
    }
    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }
    public int getTotalPage() {
        return totalPage;
    }
    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }
    public List<T> getProductList() {
        return productList;
    }
    public void setProductList(List<T> productList) {
        this.productList = productList;
    }
    

}

3 . 控制层中通过前台传的页数与每页的数量向service要page对象

package web;



import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import daomain.User;
import service.UserService;
import utils.PageBean;
@WebServlet("/userfenye")
public class Userfenye extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        UserService service = new UserService();
        
        //模拟当前是第一页，如果刚进来显示第一页数据
        String currentPageStr = request.getParameter("currentPage");
        if(currentPageStr==null) currentPageStr="1";
        int currentPage = Integer.parseInt(currentPageStr);
        //认为每页显示12条，后期可以根据用户输入设置每页显示的页数
        int currentCount = 8;
        
        PageBean<User> pageBean = null;
        try {
            pageBean = service.findPageBean(currentPage,currentCount);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        request.setAttribute("pageBean", pageBean);
        System.out.println(pageBean.getProductList());
        
        request.getRequestDispatcher("/shangpinxianshi.jsp").forward(request, response);
        
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

4. service层调用dao返回总数并调用dao取出数据(limit关键字)

package service;

import java.sql.SQLException;
import java.util.List;

import dao.UserDao;
import daomain.User;
import utils.PageBean;

public class UserService {

    private UserDao userDao;
    
    //谁调用服务谁创建dao
    public UserService() {
        userDao = new UserDao();
    }
    public PageBean<User> findPageBean(int currentPage, int currentCount) throws SQLException {
        
        //目的：就是想办法封装一个PageBean 并返回
        PageBean<User> pageBean = new PageBean();
        //1、当前页private int currentPage;
        pageBean.setCurrentPage(currentPage);
        //2、当前页显示的条数private int currentCount;
        pageBean.setCurrentCount(currentCount);
        //3、总条数private int totalCount;
        int totalCount = userDao.getTotalCount();
        pageBean.setTotalCount(totalCount);
        //4、总页数private int totalPage;
        /*
         * 总条数        当前页显示的条数    总页数
         * 10        4                3
         * 11        4                3
         * 12        4                3
         * 13        4                4
         * 
         * 公式：总页数=Math.ceil(总条数/当前显示的条数)
         * 
         */
        int totalPage = (int) Math.ceil(1.0*totalCount/currentCount);
        pageBean.setTotalPage(totalPage);
        //5、每页显示的数据private List<T> productList = new ArrayList<T>();
        /*
         * 页数与limit起始索引的关系
         * 例如 每页显示4条
         * 页数        其实索引        每页显示条数
         * 1        0            4
         * 2        4            4
         * 3        8            4
         * 4        12            4
         * 
         * 索引index = (当前页数-1)*每页显示的条数
         * 
         */
        int index = (currentPage-1)*currentCount;
        
        List<User> userList = userDao.findUserListForPageBean(index,currentCount);
        pageBean.setProductList(userList);
        System.out.println(userList);
        
        return pageBean;
    }
}

5.dao层从数据库中取出service层所需要的数据，并提交给service层

(如果是最后一页的话，limit超出后只会取剩下的)

package dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import daomain.User;
import utils.DataSourceUtils;

/**
 * 
* @author: qlq
* @date :  2017年7月6日上午11:57:56
* @description:chuli yonghu xinxi
 */
public class UserDao {

    //获得全部的用户条数，返回一个整数
    public int getTotalCount() throws SQLException {
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select count(*) from user";
        Long query = (Long) runner.query(sql, new ScalarHandler());
        return query.intValue();
    }


    public List<User> findUserListForPageBean(int index, int currentCount) throws SQLException {
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select * from user limit ?,?";
        return runner.query(sql, new BeanListHandler<User>(User.class), index,currentCount);
    }

}

6.使用分页插件在页面进行显示

1.　　bootstrap分页插件使用简单，超过十个以上的页码显示是个问题

1.1　　使用规则:

首先需要引入bootstrap的css和Jquery等三个文件

1.2　　页面中使用显示分页标签

<%--items用于迭代的变量，var代表每次迭代之后存放名字 --%>
        <table border="1px" cellspacing="0px" align="center" cellpadding="0px">
            <tr>
                <th>id</th>
                <th>姓名:</th>
                <th>图片</th>
                <th>密码</th>
            </tr>
            <c:forEach items="${pageBean.productList }" var="user">
                <tr>
                    <th>${user.id}</th>
                    <th>${user.name}</th>
                    <th><img alt=""
                        src="${pageContext.request.contextPath }/${user.picture}"
                        style="width: 180px; height: 120px"></th>
                    <th>${user.password}</th>
                </tr>

            </c:forEach>

        </table>


        <!--分页 -->
        <div style="width: 380px; margin: 0 auto; margin-top: 50px;">
            <ul class="pagination" style="text-align: center; margin-top: 10px;">
                <!-- 上一页 -->
                <!-- 判断当前页是否是第一页 -->
                <c:if test="${pageBean.currentPage==1 }">
                    <li class="disabled"><a href="javascript:void(0);"
                        aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                    </a></li>
                </c:if>
                <c:if test="${pageBean.currentPage!=1 }">
                    <li><a
                        href="${pageContext.request.contextPath }/userfenye?currentPage=${pageBean.currentPage-1}"
                        aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                    </a></li>
                </c:if>




                <c:forEach begin="1" end="${pageBean.totalPage }" var="page">
                    <!-- 判断当前页 -->
                    <c:if test="${pageBean.currentPage==page }">
                        <li class="active"><a href="javascript:void(0);">${page}</a></li>
                    </c:if>
                    <c:if test="${pageBean.currentPage!=page }">
                        <li><a
                            href="${pageContext.request.contextPath }/userfenye?currentPage=${page}">${page}</a></li>
                    </c:if>

                </c:forEach>

                <!-- 判断当前页是否是最后一页 -->
                <c:if test="${pageBean.currentPage==pageBean.totalPage }">
                    <li class="disabled"><a href="javascript:void(0);"
                        aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                    </a></li>
                </c:if>
                <c:if test="${pageBean.currentPage!=pageBean.totalPage }">
                    <li><a
                        href="${pageContext.request.contextPath }/userfenye?currentPage=${pageBean.currentPage+1}"
                        aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                    </a></li>
                </c:if>

            </ul>
        </div>
        <!-- 分页结束 -->

1.3 效果

2.好看的分页插件

2.1 　　导入其css与js文件(前提是导入jquery文件)

<link href="${pageContext.request.contextPath }/css/pagination.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath }/js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.pagination.js"></script>

2.2　　使用分页标签

1.Html中在表格后面定义一个div

<div id="News-Pagination"></div>

2.定义一个表单让其隐藏，点击页数的时候修改表单的action地址提交表单访问servlet。

(结合条件查询后可将条件封装在表单中提交查询，是否隐藏看具体情况)

     <form action="/fenye2/userfenye"   id="stuForm"  method="post" style="display: none">   

                 姓名:<input type="text" name="stuName" value="${stuName }"> &nbsp;&nbsp;

                性别:                 <select name="gender" id="gender" style="width:80px">

                                               <option value="0">全部</option>

                                               <option value="1">男</option>

                                               <option value="2">女</option>

                                     </select>

                                     &nbsp;&nbsp;         

       <input type="submit" value="查询">   

    </form>

3.头文件中定义JS文件

<script type="text/javascript">

//点击分页按钮以后触发的动作

function handlePaginationClick(new_page_index, pagination_container) {

    //更改表单的请求地址后向Servlet请求数据

    $("#stuForm").attr("action", "/fenye2/userfenye?currentPage=" + (new_page_index+1));   //前端从0开始，后端从1开始，因此要加1

    $("#stuForm").submit();

    return false;

}

 

$(function(){

         $("#News-Pagination").pagination(${pageBean.totalCount}, {

        items_per_page:${pageBean.currentCount}, // 每页显示多少条记录

        current_page:${pageBean.currentPage} - 1, // 当前显示第几页数据(后端比前端多一)  

        num_display_entries:5, // 分页显示的条目数

        next_text:"下一页",    //上下页显示标志

        prev_text:"上一页",     

        num_edge_entries:2, // 连接分页主体，显示的条目数

        callback:handlePaginationClick     //回调函数

         });

        

});

</script>

4.　　使用时需要修改的几处地方

3.EasyUI的分页插件(使用简单好看)

引入:

分页代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Layout（布局）</title>
        <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../themes/icon.css">
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
        <script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="paginationID" style="background:#efefef;border:1px solid #ccc;width:800px"></div>
    </body>

    <script>
        //        pagination组建名
        $('#paginationID').pagination({
            //            组件属性
            "total": 1000,
            "pageSize": 10,
            "pageNumber": 1,
            "pageList": [10, 20],
            "layout": ['list', 'sep', 'first', 'prev', 'manual', 'next', 'last', 'links'],
            "onSelectPage": function(pageNumber, b) {
                alert("pageNumber=" + pageNumber);
                alert("pageSize=" + b);
            }
        });
    </script>

</html>

效果:

posted @ 2017-08-07 19:30 QiaoZhi 阅读(515) 评论(0) 编辑收藏举报

刷新页面返回顶部

Qiao_Zhi

有远大抱负的人不可忽略眼前的工作!!!

分页显示——（一）

1.思路介绍:

2.PageBean工具类(泛型类)

3 . 控制层中通过前台传的页数与每页的数量向service要page对象

4. service层调用dao返回总数并调用dao取出数据(limit关键字)

5.dao层从数据库中取出service层所需要的数据，并提交给service层

6.使用分页插件在页面进行显示

1.　　bootstrap分页插件使用简单，超过十个以上的页码显示是个问题

1.1　　使用规则:

1.2　　页面中使用显示分页标签

2.好看的分页插件

2.1 　　导入其css与js文件(前提是导入jquery文件)

1.Html中在表格后面定义一个div

2.定义一个表单让其隐藏，点击页数的时候修改表单的action地址提交表单访问servlet。

3.头文件中定义JS文件

4.　　使用时需要修改的几处地方

3.EasyUI的分页插件(使用简单好看)

公告

Qiao_Zhi

有远大抱负的人不可忽略眼前的工作!!!

分页显示——（一）

1.思路介绍:

2.PageBean工具类(泛型类)

3 . 控制层中通过前台传的页数与每页的数量向service要page对象

4. service层调用dao返回总数并调用dao取出数据(limit关键字)

5.dao层从数据库中取出service层所需要的数据，并提交给service层

6.使用分页插件在页面进行显示

1. bootstrap分页插件使用简单，超过十个以上的页码显示是个问题

1.1 使用规则:

1.2 页面中使用显示分页标签

2.好看的分页插件

2.1 导入其css与js文件(前提是导入jquery文件)

1.Html中在表格后面定义一个div

2.定义一个表单让其隐藏，点击页数的时候修改表单的action地址提交表单访问servlet。

3.头文件中定义JS文件

4. 使用时需要修改的几处地方

3.EasyUI的分页插件(使用简单好看)

公告

1.　　bootstrap分页插件使用简单，超过十个以上的页码显示是个问题

1.1　　使用规则:

1.2　　页面中使用显示分页标签

2.1 　　导入其css与js文件(前提是导入jquery文件)

4.　　使用时需要修改的几处地方