MongoDB简单的分页查询加EasyUi，前台页面的展示

EasyUI分页

最新推荐文章于 2022-11-24 21:57:34 发布

原创最新推荐文章于 2022-11-24 21:57:34 发布 · 322 阅读

1 ·

CC 4.0 BY-SA版权

未经原作者允许不得转载本文内容，否则将视为侵权。转载或者引用本文内容请注明来源及原作者。谢谢！

文章标签：

#MongoDB #EasyUI #分页

【Web前台】前台篇专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用EasyUI实现商品列表的分页展示，包括前端页面配置及后端数据处理过程。

首先定义一个Table当载体

<!-- 查询 -->
    <table id="goodsTable"></table>

script：代码模块

//页面加载事件
$(function(){
	initFindGoodList();
})

//分页查询商品表
function initFindGoodList(){
	$("#goodsTable").datagrid({
		url:'../goods/findGoods.do',  //进入Controller后台进行查询
		//浏览器打开时加载 条查页面
		toolbar:'#toolbar',
		//屏幕自适应
		fit:true,
		//pagination开启分页,如果开启了easyui分页,默认会传2个参数。分别是page(第几页)和rows(每页多少条)，默认是第一页，每页10条数据
		pagination:true,
		//自定义每页显示的条数
		pageSize:2,
		//自定义列表下拉框
		pageList:[2,4,10,15,20,40],
		columns:[[
            //field:代表的是你实体Bean的名字，title就是标题
			{field:"check",checkbox:true},
			//{field:'id',title:'id'},
			{field:'name',title:'商品名称'},
			{field:'count',title:'评论数量'},
			{field:'caozuo',title:'操作',formatter:function(value,row,index){
				return "<input type='button' value='查看评论' onclick='chakan(\""+row.id+"\")'>";
			}}
		]]		
	})
}

后台Controllrt层

//商品列表分页查询
//RequestMapping 你前台指向的路径
	@RequestMapping("findGoods")
	@ResponseBody
	public JSONObject findGoods(Integer page, Integer rows) {
		return goodsService.findGoods(page,rows);
	}

后台Service层

//查询商品分页列表
	@Override
	public JSONObject findGoods(Integer page, Integer rows) {
		Query query = new Query();
		JSONObject jsonObject = new JSONObject();
		//查询数量
		long total  = mongoTemplate.count(query,GoodsBean.class);
		//起始条数
		int start = (page-1)*rows;
		//分页
		query.skip(start).limit(rows);
		//查询数据
		List<GoodsBean> find = mongoTemplate.find(query, GoodsBean.class);
		//total总条数
		jsonObject.put("total", total);
        //rows查询出的数据
		jsonObject.put("rows", find);
		
		return jsonObject;
	}

分页就完成了，前台可以看到效果！