easyui数据分页基础版(第一版)

1.效果图

这是最基础版本，比较简单，首先下载一套easy放到项目中，然后看我的页面引入的什么你就引入什么

页面数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/icon.css">

</head>
<body>
<table id="dgs" title="韩安生easyui测试" class="easyui-datagrid" fitColumns="true" pagination="true"
       toolbar="#tb" rownumbers="true">
    <thead>
    <tr>
        <th field="cb" checkbox="true"  align="center"></th>
        <!--<th field="tid" width="20" align="center" hidden="true"></th>-->
        <th field="id" width="200" >学号</th>
        <th field="className" width="100" align="center">班级名称</th>
        <th field="classSumNum" width="100" align="center">班级人数</th>
        <th field="teacherName" width="100" align="center">老师名称</th>
        <th field="fdyName" width="100" align="center">辅导员名称</th>
        <th field="fdyNum" width="100" align="center">辅导员编号</th>
    </tr>
    </thead>
</table>
<script src="js/jquery.js"></script>
<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<script>
$(function(){
    //注意：本来我的url是写在table标签中的，但是那样的话参数不好传递需要拼接，所以把url动态写
    $("#dgs").datagrid({
        collapsible: true,
        url: "../../fysq",
        method: 'POST',
        sortName: 'title',
        loadMsg: "数据加载中...",
        //数据展示我写的静态的在table中，也可以用下面的动态的进行展示
//        columns:[[
//               {title: '学号', field: 'id', width: 200, align: 'center'},
//               {title: '班级名称', field: 'className', width: 100, align: 'center'},
//               {title: '班级人数', field: 'classSumNum', width: 100, align: 'center'},
//               {title: '老师名称', field: 'teacherName', width: 100, align: 'center'},
//               {title: '辅导员名称', field: 'fdyName', width: 100, align: 'center'},
//               {title: '辅导员编号', field: 'fdyNum', width: 100, align: 'center'},
//        ]]
    });
    //自定义分页条的样式，因为默认的可读性不是很好
    var p = $('#dgs').datagrid().datagrid('getPager');
    p.pagination({
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50],
        beforePageText: '第',
        //下面这几个参数就用就这个名称不用改
        afterPageText: '共{pages}页',
        displayMsg: '当前显示 {from} 到 {to} ,共{total}记录',
//        onSelectPage: function (pageNumber, pageSize) {
//        }
    })
})
</script>
</body>
</html>

前后台交互主要注意前台参数传递什么，后台需要封装什么数据类型进行返回，前台默认传递俩参数page,rows,而后台封装的数据需要为map,map中一个rows放数据，一个total放数据条数，知道了这问题就好办了

controller代码：

    public Map<String,Object> fysq(int page,int rows){
        Map<String,Object> map=new HashMap<String,Object>();
        List<ClassTable> ct=dataShowService.queryInfoxPlus( page, rows);
        int count=dataShowService.queryAllTS();
        map.put("rows",ct);
        map.put("total",count);
        return map;
    }

注意：在service根据page算出来数据起始条数，page=(page-1)*rows,后面代码过于简单就不咱贴了

easyui数据分页基础版(第一版)

猜你喜欢