EasyUI分页显示——(一)

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);
    }
}

 

四.  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;
    }
}

⑤.dao层从数据库中取出service层所急需的数码,并提交给service层

(即便是终极1页的话,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);
    }

}

 

陆.采用分页插件在页面举办展示

壹.  bootstrap分页插件使用简单,当先1贰个以上的页码呈现是个难点

一.一  使用规则:

首先须求引进bootstrap的css和Jquery等四个文件

EasyUI 1

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="EasyUI 2"
                        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"> &laquo;
                    </a></li>
                </c:if>
                <c:if test="${pageBean.currentPage!=1 }">
                    <li><a
                        href="${pageContext.request.contextPath }/userfenye?currentPage=${pageBean.currentPage-1}"
                        aria-label="Previous"> &laquo;
                    </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"> &raquo;
                    </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"> &raquo;
                    </a></li>
                </c:if>

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

 

 

 1.3  效果

EasyUI 3

 

 

 

 

二.美观的分页插件

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>

二.概念八个表单让其隐身,点击页数的时候修改表单的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>

 

四.  用到时索要修改的几处地方

EasyUI 4

EasyUI 5

 

三.EasyUI的分页插件(使用简便赏心悦目)

引入:

EasyUI 6

 

EasyUI 7

 

 

分页代码:

<!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>

效果:

EasyUI 8