1、用datagrid 做分页显示， 依据API样例，最终解决。废话不说，datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是 后台会通过 获取page 获取当前页 依据rows每页显示条数

返回格式 {"total":486,"rows":[{"age":10,"email":"lqi@sina.com","id":1,"name":"张三","sex":"男"}]}

total 总条数不能改 rows 数据 查询出来的list

2、数据库数据

3、看效果如图：

4、html代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

			<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="css/demo.css">

	<link rel="stylesheet" type="text/css" href="css/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 type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

	</head>

	<body>

<table id="dg" class="easyui-datagrid" style="width:100%;">

</table>

 <script type="text/javascript">

    $('#dg').datagrid({

        url:'http://localhost:8080/easyui/TestData',//数据请求地址

       toolbar:'#toolbar',// 数据网格工具栏 比方加入 改动

       pagination:true,//分页显示

       fitColumns:true,//自己主动适应宽度

       autoRowHeight:true,//自己主动行高度

       loadMsg:'正在载入数据请稍后...',

       nowrap:true,//设置为true 有利于提高性能

       idField:'id',//字段标识

       rownumbers:true,//显示行号

       singleSelect:true,//仅仅同意选择一行

       //pageNumber:1,//初始化页面数量

       pageSize:20,//初始化显示条数

       pageList:[20,40,60],//分页列表

        columns:[[

            {field:'id',title:'id',width:100},

            {field:'name',title:'name',width:100},

            {field:'email',title:'email',width:100,align:'center'}

        ]]

    });

   	/*

   	这里多多两句通过例如以下參数可获取一些分页数据

   		var opts=$('#dg').datagrid('options');

   		//获取当前页

   	   var page_Number = opts.pageNumber;   //pageNumber为datagrid的当前页码

          	//获取每页显示的条数

   	   var page_Size = opts.pageSize;

   	 */

    </script>

</body>

</html>

5、servlet类

import java.io.IOException;

import java.io.Writer;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

/**

 * Servlet implementation class TestData

 */

public class TestData extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**

	 * @see HttpServlet#HttpServlet()

	 */

	public TestData() {

		super();

		// TODO Auto-generated constructor stub

	}

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	protected void doGet(HttpServletRequest request,

			HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		doPost(request, response);

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	protected void doPost(HttpServletRequest request,

			HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("application/json");

		response.setCharacterEncoding("UTF-8");

		response.setHeader("Cache-Control", "no-cache");

		// 获取前台页数

		int page = Integer.parseInt(request.getParameter("page"));

		// 获取前台每页显示条数

		int row = Integer.parseInt(request.getParameter("rows"));

		List<Userinfo> list = JDBCUtil.query(page, row);

		Map<String, Object> jsonMap = new HashMap<String, Object>();// 定义map

		jsonMap.put("total", JDBCUtil.queryCount());// total键 存放总记录数。必须的

		jsonMap.put("rows", list);// rows键 存放每页记录 list

		// 格式化result 一定要是JSONObject

		String result = JSONObject.fromObject(jsonMap).toString();

		System.out.println(result);

		Writer out = response.getWriter();

		out.write(result);

	}

}

源代码下载地址：http://download.csdn.net/download/itlqi/8868529

easyui 分页实现的更多相关文章

  1. 【技巧】EasyUI分页组件pagination显示项控制

    我们使用easyui分页时,分页组件显示项有很多,默认如下是这样的: 有时候我们并不想显示这么多控制项,我们可以通过属性来控制:如下来自EasyUI官网: 如下写法,在datagrid中使用,如下控制 ...

  2. easyui分页的使用方法

    使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").dat ...

  3. MVC 使用Jquery EasyUI分页成功

    先上图吧

  4. 后台使用oracle前台使用easyui分页机制

    前台easyui 的datagrid中设置分页属性: pagination:true,//显示分页 pagePosition:'bottom',//分页栏位置 both 上下 bottom.top p ...

  5. easyUI分页实现加搜索功能

    前台页面: js代码: ps:pagination为true时会在table下面加上easyUI的分页. load函数会将查询值传给datagrid并传给后台重新加载. DAO.xml为: 后台代码实 ...

  6. (转)EasyUI 分页总结

      最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习.1.首先使用EasyUI 的DataGrid分页,得加载其js类库:< ...

  7. EasyUI 分页 简洁代码

    做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...

  8. 关于easyUI分页

    首先前台会传来两个参数,分别是rows(一页数据的大小,即一页有多少条数据)和page(第几页),根据这两个参数可以计算出从数据库中从第几 条数据开始取和要取多少条数据.数据取出来后,因为easyUI ...

  9. Struts2与easyui分页查询

    easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...

随机推荐

  1. iOS开发之Quartz2D详解

    1. 什么是Quartz2D? Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片( ...

  2. 重新开始学习javase_对象的摧毁

    一.概述(转:@深入理解Java虚拟机:JVM高级特性与最佳实践(最新第二版) ) 经过半个世纪的发展,内存的动态分配与内存回收技术已经相当成熟,一切看起来都进入了“自动化”时代,那为什么我们还要去了 ...

  3. 你好，C++（35）类是如何藏私房钱的？6.2.4 拷贝构造函数

    6.2.6  类成员的访问控制 类成员包括类的成员变量和成员函数,它们分别用来描述类的属性和行为.而类成员的访问控制决定了哪些成员是公开的,可以被外界访问,也可以被自身访问:哪些成员是私有的,只能在类 ...

  4. 2D简单图形相关算法罗列

    因为平常在Qt开发过程中经常会与一些简单的2D几何图形打交道,因此学习和掌握一些基本的2D几何计算还是很有必要的,在这里罗列一些常用的基本情况,之后会适时补充. [1] 两点之间距离,根据两个点的差值 ...

  5. vim插件和配置

    vim插件和配置 插件 pathogen 可以方便地管理vim插件 在没有pathogen的情况下,vim插件的文件全部都放在.vim目录,卸载插件很麻烦,pathogen可以将不同的插件放在一个单独 ...

  6. location对象，将url解析为独立片段search属性截取传递的参数

    通过location对象的search属性截取字符串传递过来的参数 search ?item=hello&name=auto&age=25 返回url中传递的参数,以?开头 funct ...

  7. JavaScript重复元素处理

    判断一个字符串中出现次数最多的字符,统计这个次数 //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数 var str = "abcdefgadd ...

  8. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

  9. python之map和filter

    li = [11,22,33,44,55,66] ret = filter(lambda a:a>33,li) print(list(ret)) ret2 = map(lambda a:a+10 ...

  10. PPT2010中设置音乐播放停止位置

    ppt不仅只是制作幻灯片的效果,而且在制作幻灯片过程中,由于内容很多,每个版块想要呈现的效果是不同的,那么配乐的风格自然也是不同.如何让我们插入的音乐在合适的内容的时候播放和停止呢,下面就来教大家具体 ...