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. Oracle解析 xml 记录一下（未完待续）

    Oracle解析 xml 记录一下. SQL> desc xmlparser; PROCEDURE FREEPARSER Argument Name                  Type  ...

  2. Ubuntu12.04安装insight-6.8

    insight是在Linux下一个比较好用的GDB的前端 insight首页:http://sourceware.org/insight/index.php 在这里下载源码:insight-6.8.t ...

  3. [转]mysql 的日志的启动与查看

    mysql有以下几种日志:错误日志:  -log-err查询日志:  -log慢查询日志: -log-slow-queries更新日志:    -log-update二进制日志:-log-bin 日志 ...

  4. XML约束图解

  5. Qt中widget重新setParent需要注意的问题

    有时候需要在widget中重新setParent,但会发现setParent有时候会出现问题,比如子窗口不在刷出来等等. 其实,有一点是需要注意的,就是Qt文档里说的,如果你当前widget重新设置了 ...

  6. sql 语句左连接右连接小例子

    A表(a1,b1,c1) B表(a2,b2) a1 b1 c1 a2 b2 01 数学 95 01 张三 02 语文 90 02 李四 03 英语 80 04 王五 select A.*,B.* fr ...

  7. Python列表和字典的方法总结

    列表方法: 方法 说明 append( item ) 在列表末尾插入(item ) count( element ) 返回element在列表中出现的次数 extend( newlist ) 将new ...

  8. iOS开发之WKWebView简单使用

    iOS开发之WKWebView简单使用   iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...

  9. jQuery plugin

    SidebarJS http://makotot.github.io/sidebar/

  10. Seek the Name, Seek the Fame

    poj2752:http://poj.org/problem?id=2752 题意:给你一个串,让你求前n个字符和后n个字符相同的n有多少,从小到大输出来. 题解:这一题要深刻理解KMP的next数组 ...