EasyUI实现表格分页-蒲公英云

EasyUI实现表格分页

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

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;
    }