Mybatis：pageHelper+elementUI-el-pagination实现分页

怼烎@ 2022-05-19 08:11 443阅读 0赞

分页是一个很常用的东西，今天就用Mybatis+elementUI实现分页实现了一下分页。

html:  
事件解释  
@size-change：当每页显示的条数发生改变是触发，即：原先显示5条/页，现在改成了10条/页  
如图：![这里写图片描述][70]

@current-change：当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页

:page-sizes：上图中的每页显示的条数2/4/6/8/10的选项设置，这些2,4,6…其实是在:page-sizes属性中定义的。

:page-size：每页显示的数据的条数。当我们点击@size-change事件，然后从:page-sizes中选择相应的条数，element会将我们选中的条数赋值给属性:page-size，然后去后台查询数据。

:total 分页导航中显示的总条数。是在后台查询数据后才赋值的

layout：表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素

<el-pagination
                @size-change="handleSizeChange"        
                @current-change="handleCurrentChange"
                :page-sizes="pagination.pageSizes"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
         >
    
        </el-pagination>

js代码：

解释：  
pagination：因为el-pagination需要很多的参数去初始化控件本身，即total、:page-size、：page-sizes等。所以我们就把这些零散的参数封装到一个对象里。

queryParam：用来携带查询条件的

区别：pagination是用来初始化控件，或者根据后台返回的数据，给控件的参数进行赋值，来显示总共多少条记录，一共显示多少页等等，具体的表现为分页导航条的显示。总之它是和控件本身打交道的。  
queryParam是用来查询的，因为我们查询的时候可能要有多个参数，比如点击 4条/页，或者直接点击页码，又或者直接输入页码等，我们总要将这些参数传给后台。那干脆直接把它们封装到对象里，一起发送给后台。所以在点击页数，或者选择每页显示的条数的时候，要将该值赋值给queryParam中相应的字段，然后再发送给后台。

handleSizeChange：上面已经解释过了，当页面显示条数变化时被触发，此时我们将查询条件赋值给queryParam，之后进行查询，就是带着查询条件，重新执行得到数据的请求。

handleCurrentChange：与handleSizeChange，不赘述。

注：handleSizeChange与handleCurrentChange触发是，都是将查询条件的值赋值给queryParam，切莫赋值给pagination，原因上面已经讲得很清楚了。具体代码如下所示

controller:这里遇见了415的问题请看我的上一篇播客：  
[https://blog.csdn.net/java\_xxxx/article/details/81163432][https_blog.csdn.net_java_xxxx_article_details_81163432]

@RequestMapping("/customer/pageData.do")
        @ResponseBody
        public MyPage pageData(@RequestBody  MyPage myPage){
    
            System.out.println(myPage.getPageSize()+"===="+myPage.getPageNumber());
    
            return customerService.pageData(myPage);
        }

service:  
注：这里出现了bug:  
java.lang.ClassCastException: java.util.ArrayList cannot be cast to com.github.pagehelper.Page.  
bug出现在这一行

com.github.pagehelper.Page<Customer> page = (com.github.pagehelper.Page<Customer>) customerDao.getCustomreList();

原因是我导入的mavenjar包，但是却没有在mybatis里面配置分页信息，加入以下配置

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            <property name="dataSource" ref="dataSource"/>
            
            
            
            <property name="typeAliasesPackage" value="com.mingtai.mavenweb.entity"></property>
            <property name="plugins">
                <array>
                   
                  <bean class="com.github.pagehelper.PageHelper"> 
    
                        <property name="properties">
                            <value>
                                helperDialect=mysql     
                            </value>
                        </property>
                    </bean>
                </array>
            </property>
        </bean>

jar包

<dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.0.0</version>
            </dependency>

public MyPage pageData(MyPage myPage) {
    
            // 该函数只对紧挨着它的下一条查询语句起作用
            PageHelper.startPage(myPage.getPageNumber(),myPage.getPageSize()); // 设置开始页码，和每页大下，这是分页的2个必要条件
            com.github.pagehelper.Page<Customer> page = (com.github.pagehelper.Page<Customer>) customerDao.getCustomreList();
            System.out.println(myPage.getPageNumber()+"++++++++++"+myPage.getPageSize());
            return new MyPage(Long.valueOf(page.getTotal()),page.getResult());
        }

自定义类：

public class MyPage {
        public Integer pageSize;
        public Integer pageNumber;
    
        public List rows;
        public Long total;
    
        public MyPage(Long total ,List rows){
            this.total=total;
            this.rows=rows;
        }
        public MyPage(Long total ,List rows,Integer pageSize,Integer pageNumber){
            this.total=total;
            this.rows=rows;
            this.pageSize=pageSize;
            this.pageNumber=pageNumber;
        }
        public MyPage(){
    
        }

这里要给构造函数，否则会报异常，最好这3个都给

pageHelper封装的数据格式

因为我们要从后台返回的数据中拿到一些值分别赋值给不同的属性，所以，下面再来探讨以下pageHelper封装的数据格式，

{"pageNumber":null,"pageSize":null,"rows":[{"cust_address":"少陵","cust_create_id":null,"cust_createtime":"2018-07-10 00:00:00","cust_id":206,"cust_industry":null,"cust_level":null,"cust_linkman":null,"cust_mobile":null,"cust_name":"杜甫","cust_phone":null,"cust_source":null,"cust_user_id":null,"cust_zipcode":null}],"total":9}

因为ajax返回的数据在回调函数里(success:function(result)\{\})，所以  
我们要展示的数据库中的数据在rows里，取值的时候，result.rows，赋值给你定义的变量即可，一般是集合  
至于total，也是一样result.total，赋值给自定义变量，这里我们赋值给 app.pagination.total

app.userList=result.rows;
    app.pagination.total=result.total;

页面用el-table展示数据

<el-table
            :data="userList"
            style="width: 100%"
            :fit="true"
            >
        <el-table-column
            prop="cust_name"
            label="姓名"
        >
        </el-table-column>
        <el-table-column
            prop="cust_address"
            label="地址"
        >
        </el-table-column>
    
    </el-table>

到这里elementUI+mybatis分页就大功告成了！！

可以将el-pagination控件看成是一个类，而控件中的方法和属性，就是类中的方法和属性这样用起来就，理解起来就容易的多。

推荐一个讲解mybatis分页比较好的播客：[https://blog.csdn.net/qq\_16517483/article/details/72803043][https_blog.csdn.net_qq_16517483_article_details_72803043]

[70]: /images/20220519/fc86b7269f2a4032983416fc2ca63d1c.png
[https_blog.csdn.net_java_xxxx_article_details_81163432]: https://blog.csdn.net/java_xxxx/article/details/81163432
[https_blog.csdn.net_qq_16517483_article_details_72803043]: https://blog.csdn.net/qq_16517483/article/details/72803043