EasyUI Pagination分页功能的实现讲解以分页没有效果问题
EasyUI Pagination 分页没有效果？分页功能的实现讲解
本次某个项目中用到Easyui+SSM框架，而easyui-Pagination在前后台分页的写法比较多，但是相对固定，于是我在这里直接写一份关于easyui下的分页教程，省得以后到处找，也方便各位参考。
当然本文是基于SSM+Easyui而且是有一定基础的朋友。
1.分页介绍
web开发中所说的分页，实际上是分为假分页和真分页这么一说。
1.1 假分页
假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，这么做适合数据量较小的Web项目。
后台代码仅仅是将从数据库里查询到的数据转化未Json字符串类型传到前台就可以了。
前台需要写：
<script>
$('#dg').datagrid({ loadFilter: pagerFilter }).datagrid({
url: '/FreshStudentMaintain/test' //加载数据
});
// 分页数据的操作
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
</script>
后台只需要写：
public ActionResult test()
{
IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");
List<OrganizationViewModel> college = CollegeBll.QueryCollege();//查询后台数据方法
return Json(college, JsonRequestBehavior.AllowGet);
}
效果：
1.2 真分页
真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将第几页和一页多少数据传递给后台，以便查询。
EasyUI非常方便的给我们提供了自动将这两个参数传到后台的事件，当我们刚开始加载数据的时候，需要page、rows两个参数。后台需要返回总数据条数（total）以便前台显示。
这里重点讲解真分页。
1.3 真分页的实现
- 首先前台需要接收的必须是这种符合格式：
{total:15,rows:[{name:‘test’,age:12},{name:‘test2’,age:18}]}
total 总条数不能改 ，rows 数据 查询出来的list。
而转为这种json格式常规的写法有两种：一种自定义json工具类ResponseUtil，然后把数据转为json数据。一种采用注解@ResponseBody直接返回json格式数据，这个后期会单独开一个文章来讲解。
- 在jsp前台开启分页，和设置分页参数。
在初始化easyui-datagrid的时候开启分页和设置分页属性:
pagination="true"
pageNumber="1"
pageSize="10"
pageList=[10,15,20,25,30]
如图：
注意：
/*这里多多两句通过如下参数可获取一些分页数据
var opts=$(’#dg’).datagrid(‘options’);
//获取当前页
var page_Number = opts.pageNumber; //pageNumber为datagrid的当前页码
//获取每页显示的条数
var page_Size = opts.pageSize;
*/
- 后台接收参数值
“page” //第几页的数据
“rows” //每页多少条数据
// easyui datagrid 自身会自动通过 post 的形式传递 rows and page。
所以后台接收前台的分页数据只需要下面这一句话：
@Param("page")Integer page, @Param("rows")Integer rows
- 带着查询：
后台查询数据并且分页的源代码：
NaviController.java
/**
*
* @Title: Navilist
* @Description(说明):返回查询到的导航栏信息+条件查询
* @param Navigation
* @param response
* @return map
* @throws Exception
* @author: 邹涛/zoutao
* @date: 2018年9月19日
* @version 1.0
*/
@RequestMapping("/Navilist")
@ResponseBody
public List<Navigation> Navilist(Navigation navigation, HttpServletResponse response,
@Param("page")Integer page,@Param("rows")Integer rows)
throws Exception {
System.out.println("进入导航栏信息查询控制,当前页："+page+",显示条数："+rows);
response.setCharacterEncoding("UTF-8");
Map<String, Object> map = new HashMap<String, Object>();
System.out.println("+++++++"+navigation.getNavname());
/*按照名字查询*/
if (navigation.getNavname() != null
&& !"".equals(navigation.getNavname().trim())) {
map.put("navname", "%" + navigation.getNavname() + "%");
}
System.out.println("map取值："+map.get("navname"));
List<Navigation> navilist = navigationService.findNavigations(page,rows,map);//数据查询
Integer total = navigationService.getCount(map);
System.out.println("查询到的数据有："+total+"条，"+navilist);
JSONObject result = new JSONObject();
JSONArray jsonArray = JSONArray.fromObject(navilist); //转为json数组
result.put("rows", jsonArray); //必须是json对象
result.put("total", total);
ResponseUtil.write(response, result); //写入带回前台
return null;
}
如图：
注意：这个地方重要：
必须带这2个值回去，而且是固定名称。
rows和total。
服务层service：
public List<Navigation> findNavigations(@Param("page")Integer page,@Param("rows")Integer rows,@Param("map")Map<String, Object> map);
public Integer getCount(@Param("map")Map<String, Object> map);
实现层impl：
/*具体实现对应的方法*/
@Override
public List<Navigation> findNavigations(@Param("page")Integer page,@Param("rows")Integer rows,@Param("map")Map<String, Object> map) {
//Page<Navigation> aPage =new Page<>();
//默认0页
List<Navigation> lists = navigationDao.findNavigation((page-1)*rows,rows,map);
//System.out.println("数据集合："+lists);
//aPage.setRows(lists); //每一页的数据集合
//aPage.setTotal(navigationDao.getCount()); //查询总条数
return lists;
}
@Override
public Integer getCount(@Param("map")Map<String, Object> map) {
return navigationDao.getCount(map);
}
如图（图不对则以代码为主）：
Dao层：
//查询数据
public List<Navigation> findNavigation(@Param("page")Integer page,@Param("rows")Integer rows,@Param("map")Map<String, Object> map);
public Integer getCount(@Param("map")Map<String, Object> map);
Mybatis：
<select id="findNavigation" parameterType="java.util.Map" resultType="Navigation">
select * from tb_navigation
<where>
<foreach item="value" index="key" collection="map" separator=",">
<if test="key == 'navname'">
navname like #{value}
</if>
</foreach>
</where>
order by navid desc
limit #{page},#{rows};
</select>
<!-- 查询条数并计数 -->
<select id="getCount" resultType="Integer" parameterType="java.util.Map">
select count(*) from tb_navigation
<where>
<foreach item="value" index="key" collection="map" separator=",">
<if test="key == 'navname'">
navname like #{value}
</if>
</foreach>
</where>
</select>
limit #{page},#{rows}; 这个就是分页查询的关键。也是条件查询的关键。
如图：
最后的效果图：
和
以上就是关于EasyUI Pagination分页功能实现，使用到了SSM框架技术。
2. 查询到的数据全部显示在了第一页问题？
如果你出现，前台用datagrid展现数据的时候，分页控件是现实出来了，但是没有格式化成我想要的显示方式。
比如我从后台封装返回了30条数据，在页面定义一页显示10条，结果它一次就把30条数据都显示在了第一页，后台用的是mybatis查出数据。
如图：
解决 ：是因为逻辑没对。
需要在dao层或者调用dao层的方法是时候，传入参数逻辑参数：
需要这个：
(page-1)*rows,rows,map
当参数为（0 ，xx）的时候，就是查询的第一页，默认页的数据。