EasyUI 页面分页

DAO

package com.hanqi.dao;

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

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.boot.registry.StandardServiceRegistryBuilder;
import org.hibernate.cfg.Configuration;
import org.hibernate.service.ServiceRegistry;

import com.hanqi.entity.Region;
import com.hanqi.entity.Student;

public class StudentDAO {

	Configuration  cfg = null;
	ServiceRegistry  sr = null;
	 SessionFactory sf = null;
	 Session  se =null;
	Transaction tr = null;

	public StudentDAO()//注册服务
	{
		//1.加载配置文件
				cfg = new Configuration().configure();
				//2.注册服务
				 sr = new  StandardServiceRegistryBuilder()
						.applySettings(cfg.getProperties()).build();
	}
	//初始化
	private void init()
	{
		sf= cfg.buildSessionFactory(sr);
		se = sf.openSession();
		tr = se.beginTransaction();
	}
	//提交和释放
	private void destroy()
	{
		tr.commit();//提交事务
		se.close();
		sf.close();
	}

	//获取分页数据集合列表
	public List<Student> getPageList(int page , int rows)
	{
		init();
		 List<Student> rtn = new ArrayList<>();
		 rtn = se.createQuery("from Student").setMaxResults(rows)//每页行数
				 .setFirstResult((page-1)*rows).list();//其实页码

		 destroy();
		return rtn;
	}

	//获取数据条数
	public int getTotal()
	{
		int rtn= 0;
		init();
		//获取Query对对象,定义集合并实例化
		List<Object> lo = se.createQuery("select count(1) from Student").list();

		if(lo != null && lo.size() > 0)
		{
			rtn = Integer.parseInt(lo.get(0).toString());//转换成int并赋值
		}

		 destroy();

		return rtn;
	}
}

  service

package com.hanqi.service;

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

import com.alibaba.fastjson.JSONArray;
import com.hanqi.dao.StudentDAO;
import com.hanqi.entity.Student;

public class StudentService {

	PageJSON<Student> lls = new PageJSON<Student>();
	//查询分页数据
	//返回JSON
	public String getPageJSON(int page, int rows)
	{

		String rtn = "{total:0,rows:[]}";//空的JSON对象

		int total = new StudentDAO().getTotal();
		if(total>0)
		{
			List<Student> ls = new StudentDAO().getPageList(page, rows);

			String ls_json = JSONArray.toJSONString(ls);//转成JSON格式

			//转义字符,转成JSON读取的格式

			rtn =  "{\"total\":"+total+",\"rows\":"+ls_json+"}" ;

		}

		return rtn;
	}

}

  Servlet

package com.hanqi.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.hanqi.service.StudentService;

/**
 * Servlet implementation class StudentServlet
 */
public class StudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public StudentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//转码
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");

		//接受参数
		String spage = request.getParameter("page");//页码
		String srows = request.getParameter("rows");//每页行数

		if(spage!= null && srows != null)
		{
			//转型
			int page = Integer.parseInt(spage);
			int rows = Integer.parseInt(srows);

			String json = new StudentService().getPageJSON(page, rows);
			response.getWriter().println(json);
		}
		else
		{
			response.getWriter().println("{total:0,rows:[]}");
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

  页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 顺序不可以乱 -->
<!-- 1.jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.css资源 -->
<link  rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3. 图标资源 -->
<link  rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4.easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){

	$("#hh").datagrid({

		url:‘StudentServlet‘,
	//冻结列
	frozenColumns:[[
	                {field:‘id‘,checkbox:true},//复选框
	                {field:‘sno‘,title:‘学号‘,width:100}  

	                ]],
	              //定义列
	        	    columns:[[    

	        	        {field:‘sname‘,title:‘姓名‘,width:200,align:‘center‘},
	        	        {field:‘ssex‘,title:‘性别‘,width:200,align:‘center‘,
	        	        	formatter: function(value,row,index){
	        	        		if(value == ‘f‘)
	        	        			{
	        	        				return ‘男‘;
	        	        			}
	        	        		else if(value == ‘m‘)
	        	        			{
	        	        				return ‘女‘;
	        	        			}
	        	        		else if(value == ‘男‘)
        	        			{
        	        				return ‘男‘;
        	        			}
	        	        		else if(value == ‘女‘)
        	        			{
        	        				return ‘女‘;
        	        			}
	        	        		else
	        	        			{
	        	        			return ‘哈哈‘;
	        	        			}

	        	        	},
	        	        	styler:function(value,row,index){
	        	        		if(value==‘男‘)
	        	        			{
	        	        				return ‘background-color:#ccccff;color:red;‘;

	        	        			}
	        	        		else if(value == ‘f‘)
	        	        			{
	        	        			 	return ‘background-color:#ccccff;color:red;‘;
	        	        			}
	        	        	}
	        	        } ,

	        	        {field:‘sbirthday‘,title:‘生日‘,width:200,align:‘right‘},
	        	        {field:‘sclass‘,title:‘班级‘,width:200,align:‘right‘}

	        	    ]] ,
	        	    fitColumns:false,       //列自适应宽度,不能和冻结列同时设置为true
	        	    striped:true,           //斑马线
	        	    idField:‘sno‘,     //主键列
	        	    rownumbers:true,        //显示行号
	        	    singleSelect:false,      //是否单选
	        	    pagination:true,         //分页栏
	        	    pageList:[8,16,24,32] ,  //每页行数选择列表
	        		pageSize:8   ,            //初始每页行数
	        		remoteSort:false,        //是否服务器端排序,设成false才能客户端排序
	        		//sortName:‘unitcost‘,     //定义哪些列可以进行排序。

	        		toolbar:[
	        		         {
	        		        	 iconCls:‘icon-add‘,
	        		        	 text:‘添加‘,
	        		        	 handler:function(){
	        		        		 alert(‘添加按钮被点击‘)},
	        		         },
	        		         {
	        		        	 iconCls:‘icon-edit‘,
	        		        	 text:‘修改‘,
	        		        	 handler:function(){
	        		        		 alert(‘修改按钮被点击‘)},
	        		         },
	        		         {
	        		        	 iconCls:‘icon-delete‘,
	        		        	 text:‘删除‘,
	        		        	 handler:function(){
	        		        		 alert(‘删除按钮被点击‘)},
	        		         }
	        		         ],
	});
})

</script>
<table id="hh"></table>
</body>
</html>

  

时间: 2024-10-15 16:58:49

EasyUI 页面分页的相关文章

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1.Html代码 1 <script type="text/javascript" src="/js/easyui/jquery.min.js"></script> 2 <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 3 <script type="tex

asp.net mvc easyui datagrid分页

提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分页. easyui datagrid分页要求数据采用的格式 :{total:2,row:[]}, 在asp.net mvc 中服务器端只要返回这符合这样格式的json数据就好. 页面前端: 服务器端: 附带asp.net 结合 easyui 增删改查的例子: asp.net mvc easyui d

Easyui 页面訪问慢解决方式,GZIP站点压缩加速优化

1. 静态资源压缩GZIP是站点压缩加速的一种技术,对于开启后能够加快我们站点的打开速度.原理是经过server压缩,client浏览器高速解压的原理,能够大大降低了站点的流量. 详细代码能够參加jeecg高速开发平台的实现; 通过资源压缩拦截器,降低带宽訪问 參考代码: /** * JS缓存压缩 * JEECG开源社区 * 论坛:www.jeecg.org * @author 张代浩 */ public class GZipFilter implements Filter { public v

js/jquery 页面分页(看别人写的看不懂,自己写了一个---仅基础知识) 另自己倒一个jquery的.jar包即可使用

<!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 http-equiv="Content-Typ

EasyUI Datagrid 分页

EasyUI Datagrid 分页,两种情况 第一种,向后台请求数据,点击分页请求一次,点击排序请求一次.使用表格自带的ajax. box.datagrid({ url: '', //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 width: '100%', height: '500px', fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20

分页技术框架(Pager-taglib)学习一(页面分页)

一.Pager-taglib简介     1.Pager-taglib,支持多种风格的分页显示.实际上她是一个Jsp标签库,为在JSP上显示分页信息而设计的一套标签,通过这些标签的不同的组合,会形成多种不一样的分页页面,风格各异,她自带的DEMO就有八种左右的分页风格(在pager-taglib-2.0.war包下的WEB-INF\jsp 中),包括Google的分页风格.而需要订制自已的风格的分页页面也非常简单.    2.分页方式有两种:     一种是:页面分页,即从Action或者其他控

js 将很长的内容进行页面分页显示

<!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> <title>页面分页</title> &l

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

EasyUI - pagination 分页组件

总页数是手动填写,后续进行更改……………… 效果: html代码: <!--使用标签创建--> <%--<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background: #efefef; border: 1px solid #ccc;"></div>--%>