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

1.效果图

这是最第二个版本，比第一个多一个模糊查询，这也是企业开发中常用的，首先下载一套easy放到项目中，然后看我的页面引入的什么你就引入什么

页面数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <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>
<div  style="padding:3px" class="easyui-panel">
    <span>班级或辅导员名称模糊查询:</span>
    <input id="mohu" style="line-height:26px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-add">新增</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove">删除</a>
    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-save">编辑</a>
</div>
<table id="dgs" title="文章管理" 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.dataTables.min.js"></script>
<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script>
$(function(){
    queryData();

})
function queryData(){
    //注意：本来我的url是写在table标签中的，但是那样的话参数不好传递需要拼接，所以把url动态写
    $("#dgs").datagrid({
        collapsible: true,
        url: "../../fysq",
        method: 'POST',
        queryParams: {"mohu":$("#mohu").val() },
        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) {
//        }
    })
}
function doSearch(){
    queryData();
}
</script>
</body>
</html>

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

controller代码：

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

service代码：

 List<ClassTable> queryInfoxPlus(int page, int rows, String mohu);

    int queryAllTS(String mohu);

serviceImpl代码：

    @Override
    public List<ClassTable> queryInfoxPlus(int page, int rows, String mohu) {
//根据当前页算出来起始数据是第几条
        page=(page-1)*rows;
        return dataShowServiceMapper.queryInfoxPlus(page,rows,mohu);
    }

    @Override
    public int queryAllTS(String mohu) {
        return dataShowServiceMapper.queryAllTS(mohu);
    }

dao：

 List<ClassTable> queryInfoxPlus(@Param("page") int page, @Param("rows") int rows, @Param("mohu")String mohu);

    int queryAllTS(String mohu);

xml:

  <select id="queryInfoxPlus" resultType="com.ansheng.entity.ClassTable">
        select * from classtable
        <if test='mohu!="" or mohu!=null'>
            where className LIKE '%${mohu}%' or fdyName LIKE  '%${mohu}%'
        </if>
        limit #{page},#{rows}
    </select>
    <select id="queryAllTS" resultType="java.lang.Integer">
        select count(*) from classtable
        <if test='_parameter != "" and _parameter != null'>
            where className LIKE '%${_parameter}%' or fdyName LIKE '%${_parameter}%'
        </if>

    </select>

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

猜你喜欢