EasyUI实现表格分页

迷南。 2022-05-18 23:14 352阅读 0赞

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

（我的资源地址：[https://download.csdn.net/download/rexueqingchun/10547000][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应为上述写法，两个 \[\[ 之间换行，否则会解析错误**

[http_www.jeasyui.com_download_list.php]: http://www.jeasyui.com/download/list.php
[https_download.csdn.net_download_rexueqingchun_10547000]: https://download.csdn.net/download/rexueqingchun/10547000