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. [转]C++基本功和 Design Pattern系列 ctor & dtor

    今天Aear讲的是class.ctor 也就是constructor, 和  class.dtor, destructor. 相信大家都知道constructor 和 destructor是做什么用的 ...

  2. 巧用C#做中间语言 实现Java调用.net DLL

    本文将详细为大家介绍一个java调用.net DLL的方法,以实现特殊的客户的特殊要求:“在Java项目中必须使用其提供的用.net写的DLL加密机制!” 环境与工具: ◆.net framework ...

  3. C++11中int,float,double与string的转化

    在C++11中可以使用std::to_string()函数将数值转换为string格式,十分方便. 以下部分来选自cplusplus.com. std::to_string string to_str ...

  4. IOS开发之UIScrollView

    一.UIScrollView的边界处理问题: bounds属性: (1)当bounces属性设置为YES时,当UIScrollView中图片滑动到边界的时候会出现弹动的效果,就像是Linux中的果冻效 ...

  5. Nginx配置文件nginx.conf详细说明

    Nginx配置文件nginx.conf详细说明 #worker_processes 8; #worker_cpu_affinity 00000001 00000010 00000100 0000100 ...

  6. HTTP协议学习-01

    在学习一门新知识前还是先了解一下这个知识的一点点背景吧! http是属于协议层当中的最顶层的应用层,的面向对象的协议:它于 1990 年提出, 经过几年的使用与发展, 得到不断地完善和扩展. 目前在 ...

  7. android中的margin和padding

    Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin. 通俗的理解: Padding 为内边框,指该控件内部内容,如文本/图片 ...

  8. API Hook完全手册

    文章来源: http://blog.csdn.net/atfield 原文作者: ATField 整理日期: 2008-07-16 发表评论 字体大小: 小 中 大   注:本文是根据我两年前写的一个 ...

  9. /etc/fstab自动挂载文件系统

    打开 /etc/fstab 文件 [root@www ~]# vi /etc/fstab 默认情况下,fstab中已经有了当前的分区配置,内容可能类似: # <file system> & ...

  10. Excel进行项目规划的好处

    1.表格的方式 2.多个工作表 3.插入图片 4.清晰的规划 5.大众都能看得懂 6.辅助一些数据表设计,其他的流程设计 7.对项目该做什么,进度等等有一个明确的认识 8.项目管理,吃透需求,对进度把 ...