多语言展示
当前在线:1172今日阅读:84今日分享:32

miniui如何实现分页?

学习miniui主要是它方便快捷,对于分页不需要用js写过多的代码,它的分页都是封装好的,只需要网后台传递当前页码,当页条数,分页的条件以及排序的字段就能对其完成分页。前端代码看起来没那么繁琐。编写也比较简单。
工具/原料
1

前端

2

学习

方法/步骤
1

学习miniui分页,首先找到一个分页示例,如图所示。可以点击code查看源代码,也可以根据自己拷贝到编译工具的项目查看代码。

2

按行展示的代码如图中标注代码,且div标签的id 或者name 属性一定要与后台对应实体类的变量名称相同,不然显示不了。其中红色标记的url路径,就是分页请求的servlet路径。并且是通过以下方法完成请求。   mini.parse();   var grid = mini.get('datagrid1');   grid.load();

3

然后我们进入到项目中根据路径查看后台代码。SearchEmployees()这个方法主要是拿到一个hashmap,hashmap存储 dao层中拿到的total总条数,和data 多个实体类数据(以键值对的形式存储),然后把这个map转化成json数据传递到前端的一个方法。

4

参数介绍:key:模糊查询的字段名。pageSize:当前页的数据条数。pageIndex:当前页码。sortField:排序的字段。sortOrder:排序的规则。

5

往前端传递的数据,行属性可以设置为数据库对应表的主键,如图中红色标记,那么增加删除修改,都可以根据行数据来操作了。同时也可以设置行的其他前端属性。

注意事项
1

需要主要的是上面几个参数名除了key可以变,其他都不能改变因为是前端封装好的。

2

希望对你们有所帮助。

推荐信息