前些天按照视频里讲的做一个分页功能,可是不知道什么原因在页面就是不显示数据。昨天碰巧发现了一个分页插件,只需一些设置就可以完成分页,非常方便。不过由于是新手,其中遇到了很多很多麻烦,不过幸好得到大神的帮助,最终完成了功能,非常感谢他十分耐心地帮我,给你一个么么哒(づ ̄ 3 ̄)づ
没想到做一个小小的分页功能也有这么多的不懂的地方,感觉要学的东西太多太多,加油努力学习吧~

首先给出项目Github地址:Mybatis通用分页插件
然后按步骤给出各部分代码(其他无关代码和配置文件省略)

一、SqlMapConfig.xml

此处要导入两个jar包:pagehelper-5.0.0.jarjsqlparser-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

@Service
public 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

@Controller
public 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" src="../js/jquery-easyui-1.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../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>
复制代码

最后成果如下所示~

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐