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. Optimization on content service with local search in cloud of clouds

    曾老师的这篇文章发表于Journal of Network and Computer Applications,主要解决的是利用启发式算法决定如何在cloud of clouds中进行副本分发,满足用 ...

  2. [bzoj2789][Poi2012]Letters_树状数组

    Letters bzoj-2789 Poi-2012 题目大意:给定两个字符串A和B,每次交换A中相邻两个数.问至少交换多少次,可以将A变成B. 注释:$2\le n\le 10^6$ 想法:我们发现 ...

  3. Linux 命令未自动提示补全

    解决方法: yum install -y bash-completion 退出当前界面,重新进入即可.

  4. Linux Storage Stack Diagram 4.0

    https://www.thomas-krenn.com/en/wiki/Linux_Storage_Stack_Diagram

  5. junit4单元测试基础

    导入方法看如下截图就明白了:   新建测试用例 右击包名,点击新建,或者新建里的others,选择JUnit test case,如下图所示:   接下来,给测试类起名字和选择要测试的类,如下图所示: ...

  6. 手动搭建HTTP下载站点

    手动搭建HTTP下载站点 index.jsp <%--Listfile.jsp--%> <%@ page import="java.io.File,java.text.Si ...

  7. jdbc 读取oracle long raw 字段，里面存的是文本

    jdbc 读取oracle long raw 字段,里面存的是文本 参考: http://singlewolf.iteye.com/blog/278769 http://blog.csdn.net/r ...

  8. 程序中的文件之沙盒以及plist文件的初步使用

    沙盒是相对于"应用程序"的文件,也就是相相应app所在的页面的文件. 每个应用都有自己的应用沙盒(应用沙盒就是文件系统文件夹).与其它文件系统隔离.应用必须呆在在积极的沙盒中.其它 ...

  9. map-reduce入门

    map-reduce入门 近期在改写mahout源代码,感觉自己map-reduce功力不够深厚,因此打算系统学习一下. map-reduce事实上是一种编程范式,从统计词频(wordCount)程序 ...

  10. HDU 1788 Chinese remainder theorem again 中国剩余定理

    题意: 给定n,AA 以下n个数m1,m2···mn 则有n条方程 res % m1 = m1-AA res % m2 = m2-AA 问res的最小值 直接上剩余定理,嘿嘿 #include< ...