SSH分页

SSH整合分页

一.现从项目的结构开始展示一下

1.先从实体说起分页实体类为pageResult

package com.sinosoft.emep.uploadfj.util;

import java.util.List;

/**
 * 分页类
 * @author Administrator
 *
 */
public class PageResult {
    /**
     * 总条数
     */
    private int totalCount = 0;
    /**
     * 每页多少条
     */
    private int pageSize = 2;
    /**
     * 当前第几页
     */
    private int currentPage = 1;
    /**
     * 共分多少页
     */
    private int pageCount = 1;
    /**
     * 当前页 显示的数据
     */
    private List list;

    /**
     * 总条数
     */
    public int getTotalCount() {
        return totalCount;
    }

    /**
     * 总条数
     */
    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    /**
     * 每页多少条
     */
    public int getPageSize() {
        return pageSize;
    }

    /**
     * 每页多少条
     */
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    /**
     * 当前第几页
     */
    public int getCurrentPage() {
        //当前第几页 小于0
        if(this.currentPage <= 0){
            this.currentPage = 1;
        }
        //大于总页数
        if(this.currentPage > this.getPageCount()){
            this.currentPage = this.getPageCount(); 
        }
        return currentPage;
    }

    /**
     * 当前第几页
     */
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    /**
     * 共分多少页
     */
    public int getPageCount() {
        //临时数字
        int tempNum = 0;
        //如果总条数大于0
        if(this.totalCount > 0){
            tempNum = this.totalCount % this.pageSize;
            if(tempNum > 0){
                this.pageCount = this.totalCount / this.pageSize + 1;
            }
            else{
                this.pageCount = this.totalCount / this.pageSize;
            }
        }
        return this.pageCount;
    }

    /**
     * 共分多少页
     */
    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }

    /**
     * 当前页 显示的数据
     */
    public List getList() {
        return list;
    }

    /**
     * 当前页 显示的数据
     */
    public void setList(List list) {
        this.list = list;
    }   
}

2.dao层因为公用所以我放在common里面

package com.sinosoft.common.impl;

import java.io.Serializable;
import java.lang.reflect.ParameterizedType;
import java.lang.reflect.Type;
import java.util.List;

import javax.annotation.Resource;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;

import com.sinosoft.common.IBaseDao;
import com.sinosoft.util.PageResult;


/**
 * 持久层通用实现
 * 
 * @author zhaoqx
 * 
 */
public class BaseDaoImpl<T> extends HibernateDaoSupport implements IBaseDao<T> {
    // 实体类型
    private Class<T> entityClass;

    // 使用注解方式进行依赖注入
    @Resource
    // @Autowired
    // @Qualifier(value="abc")
    public void setMySessionFactory(SessionFactory sessionFactory) {
        super.setSessionFactory(sessionFactory);
    }

    /**
     * 在构造方法中动态获得操作的实体类型
     */
    public BaseDaoImpl() {
        // 获得父类（BaseDaoImpl<T>）类型
        ParameterizedType genericSuperclass = (ParameterizedType) this
                .getClass().getGenericSuperclass();
        // 获得父类上的泛型数组
        Type[] actualTypeArguments = genericSuperclass.getActualTypeArguments();
        entityClass = (Class<T>) actualTypeArguments[0];
    }

    public void save(T entity) {
        this.getHibernateTemplate().save(entity);
    }

    public void delete(T entity) {
        this.getHibernateTemplate().delete(entity);
    }

    public void update(T entity) {
        this.getHibernateTemplate().update(entity);
    }

    public T findById(Serializable id) {
        return this.getHibernateTemplate().get(entityClass, id);
    }

    public List<T> findAll() {// FROM User
        String hql = "FROM  " + entityClass.getSimpleName();
        return this.getHibernateTemplate().find(hql);
    }

    /**
     * 通用更新方法
     */
    public void executeUpdate(String queryName, Object... objects) {
        Session session = this.getSession();// 从本地线程中获得session对象

        // 使用命名查询语句获得一个查询对象
        Query query = session.getNamedQuery(queryName);
        // 为HQL语句中的？赋值
        int i = 0;
        for (Object arg : objects) {
            query.setParameter(i++, arg);
        }
        query.executeUpdate();// 执行更新
    }

    /**
     * 分页查询
     * @param hql
     * @param values 查询条件
     * @param pageResult 分页类
     */
    public void queryByPage(String hql, Object[] values, PageResult pageResult) {       
        Session session = this.getSession();
        Query query = session.createQuery(hql);

        try {
            //hql 里面有几个问号不知道
            //values 数组 查询条件  个数知道
            for(int i=0; i<values.length; i++){
                query.setParameter(i, values[i]);
            }
            pageResult.setTotalCount(query.list().size());

            //***********
            query.setFirstResult((pageResult.getCurrentPage() - 1) * pageResult.getPageSize());
            query.setMaxResults(pageResult.getPageSize());
            pageResult.setList(query.list());
        } catch (Exception e) {
            e.printStackTrace();
        }
        finally{
            session.close();
        }       
    }
}

此处的values[]是用来接受条件收索的。

图片加代码节后比较明显

此处也是

3.service层

package com.sinosoft.emep.column.service.impl;

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

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

import com.sinosoft.emep.column.dao.IColumnDao;
import com.sinosoft.emep.column.service.IColumnService;
import com.sinosoft.emep.column.vo.PubColumn;
import com.sinosoft.emep.uploadfj.vo.PubFile;
import com.sinosoft.util.PageResult;


@Service
@Transactional
public class ColumnServiceImpl  implements IColumnService{

    @Autowired
    private IColumnDao columnDao;


    /**
     * 
     * @param pageResult
     *            分页类
     * @param stu
     *            附件类 查询条件
     */
    public void queryByPage(PageResult pageResult, PubColumn pubColumn) {
        String strHQL = "From PubColumn pubColumn  Where 1=1  ";
        // 数组长度固定
        String[] values = null;
        // 集合
        List<String> conditions = new ArrayList<String>();
        if (pubColumn.getName() != null && !"".equals(pubColumn.getName())) {
            strHQL += "And pubColumn.name like ? ";
            // 查询条件赋给集合
            conditions.add("%" + pubColumn.getName() + "%");
        }
        strHQL += " order by buildtime desc ";
        // 把集合变成一个数组
        // conditions.toArray();
        columnDao.queryByPage(strHQL, conditions.toArray(), pageResult);

    }
}

1. 此处调用Hibernate的自带条件
2. 用query.list.size()来接受查询的总记录数。
3. 用query.setFirstResult来接受从第几条开始查询。
4. 用query.setMaxResult来接受每页显示几条

4.action层

package com.sinosoft.emep.column.action;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.List;

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

import net.sf.json.JSONObject;

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

import com.sinosoft.emep.column.service.IColumnService;
import com.sinosoft.emep.column.vo.PubColumn;
import com.sinosoft.util.NowString;
import com.sinosoft.util.PageResult;

@Controller
@RequestMapping(value = "/column")
public class ColumnController {
    @Autowired
    private IColumnService ColumnService;
    /**
     * 
     * 分页
     * @param response
     * @param model
     * @param pubColumn
     */
    @RequestMapping(value = "/columnallzdsfy")
    public String getalllmzdsfy(HttpServletRequest request,
            HttpServletResponse response, Model model, PubColumn pubColumn,PageResult pageResult) {

        ColumnService.queryByPage(pageResult,pubColumn);
        model.addAttribute("pageResult", pageResult);
        model.addAttribute("pubColumn", pubColumn);
        return "/back/column/column_release";
    }
    }

二.到此后台代码就结束了下面展示jsp页面
1.页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页--layui后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="favicon.ico">


    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/metroStyle.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/font_eolqem241z66flxr.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/main.css" media="all" />

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    <script src="${pageContext.request.contextPath }/treegrid/tree.table.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/zTreev3.5/css/demo.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/zTreev3.5/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/zTreev3.5/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/layui/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>

</head>

 <script type="text/javascript">
    /**-----------初始化ZTree获取数据库节点数据-----------**/
        var setting = {
            async: {
                enable: true, //开启异步加载方式
                url: "${pageContext.request.contextPath }/column/column.do",//异步加载时请求路径
                autoParam: ["id", "name", "pId"], //异步加载时加载哪些属性
                contentType: "application/json",  //异步加载json类型
                dataType : "json" //数据格式
            },  
            view: {
                dblClickExpand: false, //需要设置是否双击切换展开状态的节点 JSON 数据对象
                showLine: true, //是否显示连接线
                treeNodeKey : "id", //当前节点id属性 
                treeNodeParentKey : "pId" //当前节点的父节点id属性
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {//回调函数
                onClick: onClick
            }
        };

        var zNodes;//节点集合
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");//当前的ztree对象

        function onClick(e,treeId, treeNode) {//点击节点事件
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.expandNode(treeNode);
            $("#nodeid").val(treeNode.id); //点击节点时将id值装入
            $("#nodename").val(treeNode.name); //点击节点时将name值装入
            $("#nodepId").val(treeNode.pId); //点击节点时将pId值装入
            var nodeid=$("#nodeid").val();
            $("#picturepid").attr("value",nodeid);
            //alert(treeNode.id+"|"+treeNode.name+"|"+treeNode.pId);
        }

        /**------加载事件中读取ztree与数据库进行异步交互----**/
        $(document).ready(function(){
            $.ajax({ 
                async : false, 
                cache:false, 
                type: 'POST', 
                dataType : "json", //数据格式
                //url: "jsonAction_treelist?guid="+new Date().getTime(),//请求的action路径 
                url: "${pageContext.request.contextPath }/column/column.do",
                contentType:"application/json;charset=utf-8",
                error: function () {//请求失败处理函数 
                    $.messager.alert("提示","服务器失败...");  
                }, 
                success:function(data){ //请求成功后处理函数。 

                    zNodes = data; //把后台封装好的简单Json格式赋给treeNodes 
                } 
            });
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);//将节点集合zNodes装入
        });
</script>


<script>
layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

  //触发事件
  var active = {
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '当你选择该窗体时，即会在最顶端'
        ,area: ['1390px', '1260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ] 
        ,content: 'http://layer.layui.com/test/settop.html'
        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
        ,yes: function(){
          $(that).click(); 
        }
        ,btn2: function(){
          layer.closeAll();
        }

        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
    }

    ,offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();

      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };

  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

});
</script>





    </script>

<script type="text/javascript">
            /**
            *栏目添加
            */
            $(function(){
            $("#add_redius").bind("click",function(){
               layer.open({
              type: 2,      //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
              area: ['900px', '600px'],
              skin: 'layui-layer-molv', //样式类名  自定义样式
              closeBtn: 1 ,   // 是否显示关闭按钮
              icon: 6 ,   // icon
              anim: 1 ,//动画类型
              title:'添加栏目',
              shadeClose: false,   //点击遮罩关闭
              content: ['layui/page/column/add_column.jsp','no']
              });
            });
            });
            /**
            *栏目修改
            */
            function editculumn(ids,pId){
            layer.open({
            type: 2,
            area: ['900px','600px'],
            skin: 'layui-layer-molv', //样式类名  自定义样式
            closeBtn: 1 ,   // 是否显示关闭按钮
            icon: 6 ,   // icon
            anim: 1 ,//动画类型
            title:"栏目修改",
            shadeClose: false,
            content: ["layui/page/column/edit_column.jsp?ids="+ids+"&pId="+pId,"no"]
            });
            }
            /**
            *删除栏目
            */
             function delcolumn(currentid){
             var id = currentid;
             layer.confirm('您确定要删除这条数据吗？', {
            btn: ['确定','取消'] //按钮
            ,skin: 'layui-layer-molv' //样式类名  自定义样式
            ,closeBtn: 1    // 是否显示关闭按钮
            ,icon: 6    // icon
            ,anim: 1 //动画类型
            }, function()
            {
            layer.closeAll('dialog');
            $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/column/delcolumn.do",
            data: {
            "id":id
            },
            success : function(data){
             var msg = data.success;
             if(msg=="0"){
                alert('删除成功');
                layer.msg('删除成功');
                window.location.reload();//刷新父页面
             }else if (msg=="2"){
             alert('删除失败，请先删除当前栏目下的子级');
             }
            }
            });
            });
     }
        </script>

<body> 
<form name="form1" method="post" action="" id="form1">
<fieldset class="layui-elem-field site-demo-button">

  <blockquote class="layui-elem-quote news_search">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="name" value="${column.name }" placeholder="请输入主题名称" class="layui-input search_input">
            </div>
             <button class="layui-btn layui-btn-radius">查询</button>
        </div>
        <div class="layui-inline">
             <a class="layui-btn layui-btn-radius" id="add_redius">添加栏目</a>
        </div>
        <!-- <div class="layui-inline">
             <button class="layui-btn layui-btn-normal layui-btn-radius">修改栏目</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-warm layui-btn-radius">删除栏目</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-danger layui-btn-radius">刷新</button>
        </div> 
        <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
        </div> -->
    </blockquote>
</fieldset>


<div class="layui-form">
  <table class="layui-table">
    <colgroup>
      <col width="5%">
      <col width="13%">
      <col width="17%">
      <col width="17%">
      <col width="17%">
      <col width="14%">
      <col width="17%">
    </colgroup>
    <thead>
      <tr>
        <th>序号</th>
        <th>栏目名称</th>
        <th>主题</th>
        <th>副标题</th>
        <th>三级标题</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr> 
    </thead>
    <tbody id="con">
   <c:if test="${pageResult!=null}">
            <c:forEach items="${pageResult.list}" var="column" varStatus="abc">
            <tr>
              <td align="center"> ${abc.count}</td>
              <td align="center"> ${column.name}</td>
              <td align="center">${column.firsttitle}</td>
              <td align="center">${column.secondtitle}</td>
              <td align="center">${column.thirdtitle}</td>
              <td align="center">${column.buildtime}</td>
              <td>
                  <a class="layui-btn layui-btn-radius" onclick="editculumn(${column.id},${column.pId});" id="add_redius" name="'+item.id+'">编辑</a>
                  <a class="layui-btn layui-btn-danger layui-btn-radius" onclick="delcolumn(${column.id});" id="add_redius">删除</a>
              </td>

            </tr>
            </c:forEach>
        </c:if>
    </tbody>
  </table>
</div>
<!-- ztree -->
<div style="display: none">
  <ul id="treeDemo" class="ztree"></ul>
</div> 


  <%@ include file="/WEB-INF/jsp/back/PageTag.jsp" %>
   </form>
</body>
</html>

三、JavaScript

代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

共${pageResult.totalCount}条记录  每页${pageResult.pageSize}条  共${pageResult.pageCount}页  当前第${pageResult.currentPage}页  
  <div align="right">
      <c:choose>
        <c:when test="${pageResult.currentPage > 1}">
            <a href="javascript:void(0)" class="layui-btn layui-btn-sm" onclick="pageFirst()"><i class="layui-icon"></i></a>  <a href="javascript:void(0)" class="layui-btn layui-btn-normal layui-btn-sm" onclick="pagePre()"><i class="layui-icon"></i></a> 
        </c:when>
        <c:otherwise>
                <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
                 <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        </c:otherwise>
      </c:choose>
      <c:choose>
        <c:when test="${pageResult.currentPage < pageResult.pageCount}">
            <a href="javascript:void(0)" class="layui-btn layui-btn-normal layui-btn-sm" onclick="pageNext()"><i class="layui-icon"></i></a>  <a href="javascript:void(0)" class="layui-btn layui-btn-sm" onclick="pageLast()"><i class="layui-icon"></i></a> 
         <button ></button>
        </c:when>
        <c:otherwise>
             <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
             <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        </c:otherwise>
      </c:choose>   

  <input type="text" name="pageNum" id="txtPageNum" size="5" placeholder="输入页码" style="height: 32px;"/>
  <input type="button" name="" id="" value="GO" class="layui-btn layui-btn-radius" onclick="pageGO()" />
    </div> 
  <!-- 隐藏域 准备放 当前多少页 放这个值目的 传给 controller类 类调用dao层处理  结果  返回给页面 -->
  <!-- 添加学生时候 是不是 实体类接收数据 -->
  <input type="hidden" name="currentPage" id="txtCurrentPage" value="${pageResult.currentPage}" />
  <input type="hidden" name="pageCount" id="hidPageCount" value="${pageResult.pageCount}">
  <script type="text/javascript" src="${pageContext.request.contextPath}/back/scripts/PageOperation.js"></script>

四、前台页面用的layui插件
展示一下总的页面

展示SQL如下

五、最后希望能帮到你们，少走弯路。