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分页

最新文章

热门文章