JQueryEsayUI的datagrid分页

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分页的更多相关文章

EasyUI的datagrid分页
EasyUI的datagrid分页前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
WPF之 DataGrid分页
接着上一篇WPF之 DataGrid数据绑定,继续讲述WPF中DataGrid分页. 由于分页经常用到,就做了一个自定义控件,由于当时的局限性,只支持DataTable数据源,不过木关系,网上很多其他 ...
jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定在解决方案中新建两个文件FormMain.aspx(html也可以 ...
EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏没有达到分页效果前端 $(function (){ var p = $('#d ...
EasyUI 中datagrid 分页。
注释:datagrid分页搞了好几天才完全搞好,网上没完全的资料.明天晚上贴代码. 睡觉.
jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
WPF DataGrid分页功能实现代码
在Silverlight中DataGrid分页可以结合DataPager控件很容易实现,但是在WPF中没有类似的,需要手动实现这样一个控件: 1.创建一个UserControl,DP.xaml,代码如 ...

随机推荐

PHP学习总结（14）——PHP入门篇之常用运算符
一.什么是运算符什么是运算符?运算符是告诉PHP做相关运算的标识符号.例如,你需要计算123乘以456等于多少,这时候就需要一个符号,告诉服务器,你需要做乘法运算. PHP中的运算符有哪些?PHP运 ...
Eureka 服务的注册和发现
二.Eureka 服务端 1.新建一个 maven module 子项目 microservicecloud-eureka-server 2.pom.xml <project xmlns=&qu ...
转载 - 算法实践——舞蹈链（Dancing Links）算法求解数独
出处:http://www.cnblogs.com/grenet/p/3163550.html 在“跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题”一文中介绍了舞蹈链(Dan ...
MySQL必知必会面试题基础
1.登录数据库 (1).单实例 mysql -uroot -poldboy (2).多实例 mysql -uroot -poldboy -S /data/3306/mysql.sock 2.查看数据库 ...
unity font研究小结
项目用ngui制作的界面.字体使用了unity默认的Arial,公布后在一些android手机上发现中文不显示,就此作了一些调查. 參考unity的font说明文档:http://docs.unity ...
基于spark1.4的Spark-Sql
Author: kwu 基于spark1.4的Spark-Sql,spark1.4.1在7月15刚公布.提供较好sql支持 1.怎样启动Spark-Sql 启动脚本例如以下 #!/usr/bin/en ...
ActionFilterAttribute
https://msdn.microsoft.com/en-us/library/system.web.mvc.actionfilterattribute.onactionexecuting(v=vs ...
php错误抑制符
php错误抑制符简介 PHP 支持一个错误控制运算符:@.当将其放置在一个 PHP 表达式之前,该表达式可能产生的任何错误信息都被忽略掉. @这个符号在Java里面是注解符号. 实例 <?ph ...
架构-Eureka：第一个方法
ylbtech-架构-Eureka:第一个方法工程介绍 Spring Cloud 工程目录 model registry-center Servers tzxyfx tzxyfx-provider ...
Linux下清屏的方法
转自“https://blog.csdn.net/lis_12/article/details/54943626” clear,刷新屏幕,本质上是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之 ...

JQueryEsayUI的datagrid分页

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

随机推荐

热门专题