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. eclise -The method onClick(View) of type new View.OnClickListener(){} must override a superclass method

    在做arcgis android开发的时候,突然遇到这种错误,The method onClick(View) of type new View.OnClickListener(){} must ov ...

  2. 017_bcp_bulk_openrowset

    017_bcp_bulk_openrowset --bcp*********************************************************************** ...

  3. 创建 序列 存储过程 job

    掌握了 oracle中的 dbms_lock 函数,该函数 主要用于暂停执行的程序 1.用意 写job 以10分钟 为单元,前10分钟 从 1到10 插入测试表, 中间10分钟从 11到20插入测试表 ...

  4. openssl 使用非阻塞 bio

    序 在项目中需要访问 https 加密的网页,为了保证并发性,需要用到非阻塞的 socket,搜索发现,这种使用场景的相关介绍不是很多,所以这里记录一下使用的过程. 在项目中,所使用的 ssl 库是老 ...

  5. 在jQuery.getData中renderCallback使用不同创建方式的结果

    JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下:// 方法一:函数声明function foo() {}// 方法二:函数表达式var foo = funct ...

  6. ThinkPHP 使用极光推送给ios推送消息

    HTML <div id="wrap"><a href="<{:U('Push/pushData')}>">推送</a ...

  7. django自带User管理中添加自己的字段方法

    #coding=utf-8 from django.db import models from django.contrib.auth.models import User, make_passwor ...

  8. DNS递归和迭代原理

    11.3.7 DNS递归解析原理 “递归解析”(或叫“递归查询”,其实意思是一样的)是最常见,也是默认的解析方式.在这种解析方式中,如果客户端配置的本地名称服务器不能解析的话,则后面的查询全由本地名称 ...

  9. Solr4.8.0源码分析(11)之Lucene的索引文件(4)

    Solr4.8.0源码分析(11)之Lucene的索引文件(4) 1. .dvd和.dvm文件 .dvm是存放了DocValue域的元数据,比如DocValue偏移量. .dvd则存放了DocValu ...

  10. keil c编译器错误与解决方法

    1. Warning 280:’i’:unreferenced local variable 说明局部变量i 在函数中未作任何的存取操作解决方法消除函数中i 变量的宣告 2 Warning 206:’ ...