1. jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>damo</title>

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <!-- JQeryEsayUI必须cs文件-->

	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="<%=basePath %>js/jquery-easyui-1.5.2/themes/metro/easyui.css">

	<link rel="stylesheet" type="text/css" href="<%=basePath %>js/jquery-easyui-1.5.2/themes/icon.css">

	<style type="text/css">

	</style>

	<!-- JQeryEsayUI必须js文件-->

	<script type="text/javascript" src="<%=basePath %>js/jquery-1.8.0.min.js"></script>

	<script type="text/javascript" src="<%=basePath %>js/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="<%=basePath %>js/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>

	<!---->

	<script type="text/javascript" src="<%=basePath %>js/damo.js"></script>

  	<script type="text/javascript">

		var basePath = "<%=basePath%>";

	</script>

  </head>

  <body style="width:100%;height:99%;">
    <!-- 注意：绑定的searchBar的id分页必不可少 -->

  <div id="searchBar" style="margin-top:2px;">

	    <table cellpadding="0" cellspacing="0">

	      <tbody>

	        <tr style="text-align:center;">

	          <form method="post" id="frm" name="frm">

	              <td style="width:50px;padding-left:20px;">

	                <span>姓名：</span>

	              </td>

	              <td>

	                <input type="text" id="userName" name="userName" class="" style="width:120px;" >

	              </td>

	           </form>

	             <td class="" style="width: 30px; padding-left: 10px;">

				   <button class="" style="margin-left: 30px;" onclick="searchObj()">检索</button>

				 </td>

	        </tr>

	      </tbody>

	    </table>

    </div>

    <table id="tableId"></table>

  </body>

</html>

　　

2.damo.js( 前端页面对应J）

    $("#tableId").datagrid({

        border:0,

        width: '100%',

        height: 400,

        method: "post",

        url: basePath + "damo/damoCount.do",

        idField: 'id',

        fit: true,

        async : false,

        striped : false, // 隔行换色

        rownumbers: false, // 显示行号列

        singleSelect : true, // 选择单多行

        remoteSort: false,

        pagination: true,  //分页栏

        pageSize: 25,

        pageList: [25,50,100],

        toolbar:'#searchBar',

        frozenColumns: [

            [

				 { field: 'departmentName', title: '部门', width:100, align : 'center'},

				 { field: 'userName', title: '姓名', width:100, align : 'center'},

             ]

        ],

        columns: [

			[

				 { field: 'absenCount', title: '旷工(次)', width:60, align : 'center',

					 styler : function(value) {

						 if(value>0){

							 return 'background-color:rgb(239,200,72);font-weight:bold;';

						 }

						}

				 },

				 { field: 'latecount', title: '迟到(次)', width:60, align : 'center',

				   styler : function(value) {

					  if(value>0){

						 return 'background-color:rgb(239,200,72);font-weight:bold;';

					  }

					}

				 } ,

				 { field: 'leaveCount', title: '早退(次)', width:60, align : 'center',

				   styler : function(value) {

						if(value>0){

						  return 'background-color:rgb(239,200,72);font-weight:bold;';

						}

					}

				 }

			]

        ],

        queryParams : {

        	startDate: startDate,

        	endDate: endDate,

        	userName: userName

		}

    });

　　

3. 后台数据的处理：

//接受datagrid传过来的值

int page = request.getParameter("page") == null ? 1 : Integer.parseInt(request.getParameter("page"));//当前页

int rows = request.getParameter("rows") == null ? 25 : Integer.parseInt(request.getParameter("rows")); //每页显示行数

Integer count = 0;//总条数

Integer startcount = 0;//起始条数

Integer endCount = 0;//结束条数

startcount = ((page-1) * rows) + 1;

endCount = (page * rows);

JSONObject jsonObject = new JSONObject();

//必须返回total和rows，JQueryEsayUI会根据接收的total和rows自动去处理

jsonObject.put("total", count);

jsonObject.put("rows", list);
//数据返回
PrintWriter pw = null;
pw = response.getWriter();
pw.print(jsonObject);

　　

　　

JQueryEsayUI的datagrid分页的更多相关文章

  1. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  2. WPF之 DataGrid分页

    接着上一篇WPF之 DataGrid数据绑定,继续讲述WPF中DataGrid分页. 由于分页经常用到,就做了一个自定义控件,由于当时的局限性,只支持DataTable数据源,不过木关系,网上很多其他 ...

  3. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

  4. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  5. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  6. easyui datagrid分页

    datagrid分页设置 pagination="true" 貌似是不行的!  只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...

  7. EasyUI 中datagrid 分页。

    注释:datagrid分页搞了好几天才完全搞好,网上没完全的资料.明天晚上贴代码. 睡觉.

  8. jquery easyui datagrid 分页实现---善良公社项目

    接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...

  9. WPF DataGrid分页功能实现代码

    在Silverlight中DataGrid分页可以结合DataPager控件很容易实现,但是在WPF中没有类似的,需要手动实现这样一个控件: 1.创建一个UserControl,DP.xaml,代码如 ...

随机推荐

  1. 【hihocoder 1287】 数论一·Miller-Rabin质数测试

    [题目链接]:http://hihocoder.com/problemset/problem/1287 [题意] [题解] 取的底数必须是小于等于n-1的; 那12个数字能通过2^64以内的所有数字; ...

  2. ASP用户登录代码

    asp+access用户登录代码,其中huiyuan.mdb数据库名pUser213 表名y_username用户名字段,y_password密码字段. login.htm页面<head> ...

  3. ZOJ 3494

    超级神奇有趣题. AC自动机+数位DP.其实,数位DP在处理含有某些数字时特别不好处理,应该把它倒转为求不含有.这道题把数位DP+AC自动机结合起来,实在是很巧妙,把数字变为串来处理,强大! 要使用A ...

  4. OpenStack开发基础-oslo.config

    The cfg Module cfg Module来自于OpenStack中的重要的基础组件oslo.config,通过cfg Module能够用来通过命令行或者是配置文件来配置一些options,对 ...

  5. STM32学习之路-LCD（4）&lt;显示字符&gt;

    昨晚疯狂的打了一夜的LOL,感觉L多了,今天一天精神萎靡.还是继续把显示字符给看了,可是在犹豫要不要写这篇文章 事实上写的东西也就是copy别人家的代码,不想写那么多,就记录下自己困惑的地方吧.也许改 ...

  6. 安卓实现序列化之Parcelable接口

    安卓实现序列化之Parcelable接口 1.实现序列化的方法: Android中实现序列化有两个选择:一是实现Serializable接口(是JavaSE本身就支持的) .一是实现Parcelabl ...

  7. Vultr好server不敢独享

    Vultr是一家美国2014年成立的新公司.瞬间红遍世界,他是干什么的?他是serverVPS(Virtual Private Server)提供商,这个价格真实惊人的廉价5美金/月.折合人民币30元 ...

  8. BZOJ1053 反素数

    题目大意 对于任何正整数x,其约数的个数记作g(x).如果某个正整数x满足对任意的0<i<x,都有g(x)>g(i) ,则称x为反质数.现在给定一个数N,求出不超过N的最大的反质数. ...

  9. jsp页面自动换行

    其实只要在表格控制中添加一句 <div style="word-break:break-all">就搞定了.</div>其中可能对英文换行可能会分开一个单词 ...

  10. docker overlay网络实现

    DOCKER的内置OVERLAY网络 内置跨主机的网络通信一直是Docker备受期待的功能,在1.9版本之前,社区中就已经有许多第三方的工具或方法尝试解决这个问题,例如Macvlan.Pipework ...