EasyUI实现表格分页

1.官网下载EasyUI地址：http://www.jeasyui.com/download/list.php

（我的资源地址：https://download.csdn.net/download/rexueqingchun/10547000）

2.页面使用及添加所依赖的JS和CSS

<!DOCTYPE html>
<html>
<head>
<title>EasyUI</title>
<script src="/script/jquery.1.12.4.min.js"></script>
<script src="/script/My97DatePicker/WdatePicker.js"></script>
<script src="/script/jquery-easyui-1.5.5/jquery.easyui.min.js" ></script>
<script src="/script/jquery-easyui-1.5.5/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" href="/script/jquery-easyui-1.5.5/themes/default/easyui.css" type="text/css">
<script type="text/javascript">
$(function(){
    $('#mytab').datagrid({
        method: 'post',
        iconCls: 'icon-edit', //图标
        singleSelect: false, //多选
        height: 310, //高度
        width: 1024, //高度
        fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
        striped: true, //奇偶行颜色不同
        collapsible: true,//可折叠
        url: "jkrzList", //数据来源
        remoteSort: true, //服务器端排序
        pagination: true, //显示分页
        rownumbers: true, //显示行号
        columns: [
        			[
			           	{
			                field: 'SERVER_IP',
			                title: '字段1',
			                width: 10,
			                formatter: function (value, row, index) {
			                    return row.SERVER_IP;
			                } 
			            },
			            {
			                field: 'SERVER_NAME',
			                title: '字段2',
			                width: 10,
			                formatter: function (value, row, index) {
			                    return row.SERVER_NAME;
			                } 
			            },
			            {
			                field: 'LRSJ',
			                title: '录入时间',
			                width: 10,
			                formatter: function (value, row, index) {
			                    return row.LRSJ;
			                } 
			            }
					]
        ],
        onLoadSuccess: function () {
        	//一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
            $('#mytab').datagrid('clearSelections'); 
        }
    });

}); 

//查询
function searchInfo() {
    var params = $('#mytab').datagrid('options').queryParams; //先取得 datagrid 的查询参数
    var fields = $('#form').serializeArray(); //自动序列化表单元素为JSON对象
    $.each(fields, function (i, field) {
        params[field.name] = field.value; //设置查询参数
    });
    $('#mytab').datagrid('reload'); //设置好查询参数 reload 一下就可以了
}
</script>
</head>
<body>
<div>
<form id="form" style="margin:20px;text-align: center;">
    <table>
        <tr>
            <td width="20%">开始日期</td>
            <td width="20%"><input id="ksrq" name="ksrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" ></td>
            <td width="20%">结束日期</td>
            <td width="20%"><input id="jsrq" name="jsrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" ></td>
        	<td width="20%"><input type="button" value="查询" onclick="searchInfo()"></td>
        </tr>
    </table>
</form>
</div>

<table id="mytab"></table>

</body>
</html>

3.后台返回数据

@RequestMapping(value = "jkrzList", method = {RequestMethod.GET, RequestMethod.POST })
	@ResponseBody
	public Map<String, Object> jkrzList(HttpServletRequest request) {
		Map<String, Object> result = new HashMap<String, Object>();
		Integer page = Integer.parseInt(request.getParameter("page"));//easyUI默认传当前页码,固定参数为page
		Integer rows = Integer.parseInt(request.getParameter("rows"));//easyUI默认传每页数据量,固定参数为rows
		//以下为oracle原生分页sql,可根据自己框架调整查询方式
		int startNumber = (page-1) * rows + 1;
		int endNumber = page * rows;
		String sql = "select * from (select a.*, rownum rn from ( "
				   + "select * from t_sys_jkrz order by lrsj desc ) a "			   
				   + "where rownum <= "+endNumber+") where rn >="+startNumber;
		Map paramMap = new HashMap();
		paramMap.put("sql", sql);
		List<Map<String, Object>> list = jkconfigDao.selectPage(paramMap);
		//查询总条数
		sql = "select count(1) from t_sys_jkrz";
		paramMap.put("sql", sql);
		Integer count = (Integer) jkconfigDao.queryCount(paramMap);
		result.put("total", count);
		result.put("rows", list);
		return result;
	}

注意：若使用thymeleaf渲染html页面的话，datagrid的columns应为上述写法，两个 [[ 之间换行，否则会解析错误

EasyUI实现表格分页

猜你喜欢