前些天按照视频里讲的做一个分页功能,可是不知道什么原因在页面就是不显示数据。昨天碰巧发现了一个分页插件,只需一些设置就可以完成分页,非常方便。不过由于是新手,其中遇到了很多很多麻烦,不过幸好得到大神的帮助,最终完成了功能,非常感谢他十分耐心地帮我,给你一个么么哒(づ ̄ 3 ̄)づ
没想到做一个小小的分页功能也有这么多的不懂的地方,感觉要学的东西太多太多,加油努力学习吧~
首先给出项目Github地址:Mybatis通用分页插件
然后按步骤给出各部分代码(其他无关代码和配置文件省略)
一、SqlMapConfig.xml
此处要导入两个jar包:pagehelper-5.0.0.jar
和jsqlparser-0.9.5.jar
<!-- 配置分页插件 --><plugins> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 指定数据库方言 --> <property name="dialect" value="mysql"/> </plugin></plugins>
二、po
Country.java
public class Country { private Integer id; private String countryname; private String countrycode; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getCountryname() { return countryname; } public void setCountryname(String countryname) { this.countryname = countryname == null ? null : countryname.trim(); } public String getCountrycode() { return countrycode; } public void setCountrycode(String countrycode) { this.countrycode = countrycode == null ? null : countrycode.trim(); } @Override public String toString() { // return (this.getId()+" "+this.getCountryname()+" "+this.getCountrycode()); return "Country [id=" + id +", countryname=" + countryname + ", countrycode=" + countrycode + "]"; } }
EasyUIDataGridResult.java
public class EasyUIDataGridResult { // easyUI dataGrid 返回结果封装 Long total; // 总的记录数 List<?> rows; // 数据集 public Long getTotal() { return total; } public void setTotal(Long total) { this.total = total; } public List<?> getRows() { return rows; } public void setRows(List<?> rows) { this.rows = rows; } }
三、service
CountryService.java
public interface CountryService { public EasyUIDataGridResult getCountryList(int page, int rows); }
CountryServiceImpl.java
@Servicepublic class CountryServiceImpl implements CountryService{ @Autowired private CountryMapper countryMapper; public EasyUIDataGridResult getCountryList(int page, int rows) { //分页处理 PageHelper.startPage(page, rows); //查询结果 CountryExample example = new CountryExample(); List<Country> list = countryMapper.selectByExample(example); //获取分页信息 PageInfo<Country> info = new PageInfo<>(list); EasyUIDataGridResult result = new EasyUIDataGridResult(); long total = info.getTotal(); //封装分页信息 List<Country> row = info.getList(); result.setRows(row); result.setTotal(total); return result; } }
四、controller
CountryController.java
@Controllerpublic class CountryController { @Autowired private CountryService countryService; @RequestMapping("/country/list") @ResponseBody private EasyUIDataGridResult getItemList(Integer page, Integer rows){ EasyUIDataGridResult countrylists = countryService.getCountryList(page,rows); return countrylists; } }
五、springmvc.xml
在原来的基础上增加json convertors,以便将List集合转换成json对象,可以使用fastjson或者jackson库,二者择其一就好
注意Jar的版本,我选择的是jackson-core-2.8.7.jar
jackson-databind-2.8.7.jar
jackson-annotations-2.8.7.jar
,三者缺一不可,而且不同的版本可能会导致一些异常
<mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.StringHttpMessageConverter"/> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/> </mvc:message-converters></mvc:annotation-driven>
六、jsp
countryList.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %><html> <head> <title>列表分页展示</title> <!--必须引入jQuery和easyUI库--> <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../css/taotao.css" /> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/common.js"></script> </head> <body> <table id="dg"></table> </body> <script> $(document).ready(function () { $('#dg').datagrid({ url:'/country/list', pagination: true, columns:[[ {field:'id',title:'id',width:100}, {field:'countryname',title:'国家名称',width:100,align:'center'}, {field:'countrycode',title:'国家代码',width:100,align:'center'} ]] }); }); </script></html>
最后成果如下所示~
作者:野狗子嗷嗷嗷
链接:https://www.jianshu.com/p/a61650c2a71b
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦