分页插件的使用

分页插件的使用

前台代码

1. 定义分页相关模型数据

pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:10,//每页显示的记录数
    total:0,//总记录数
    queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据

2. 定义分页方法

VUE 提供的钩子函数created 中调用 findPage方法

 //钩子函数，VUE对象初始化完成后自动执行
created() {
    this.findPage();
}

//分页查询
findPage() {
    //分页参数
    var param = {
        currentPage:this.pagination.currentPage,//页码
        pageSize:this.pagination.pageSize,//每页显示的记录数
        queryString:this.pagination.queryString//查询条件
    };
    //请求后台
    axios.post("/travelgroup/findPage.do",param).then((response)=> {
        //为模型数据赋值，基于VUE的双向绑定展示到页面
        this.dataList = response.data.rows;//数据集
        this.pagination.total = response.data.total;//总记录数
    });
},

vue中的data数据

data:{
                activeName:'first',//添加/编辑窗口Tab标签名称
                pagination: {//分页相关属性
                    currentPage: 1,//当前页
                    pageSize:10,
                    total:100,
                    queryString:null,
                },
                dataList: [],//列表数据
                formData: {},//表单数据
                tableData:[],//新增和编辑表单中对应的自由行列表数据
                travelItemIds:[],//新增和编辑表单中自由行对应的复选框，基于双向绑定可以进行回显和数据提交
                dialogFormVisible: false,//控制添加窗口显示/隐藏
                dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
            }

3、为查询按钮绑定单击事件，调用 findPage 方法

<el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>

点击传递值，通过动态数据绑定完成页面切换

 //切换页码
                handleCurrentChange(currentPage) {
                    // currentPage为切换后的页码
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },

（2）为分页条组件绑定 current-change 事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为 handleCurrentChange

<div class="pagination-container">
    <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
</div>

后台代码

@RequestMapping("/travelgroup")
@RestController
public class TravelGroupController {

    @Reference
    private TravelGroupService travelGroupService;
    // 传递当前页，每页显示的记录数，查询条件
    // 响应PageResult，封装总记录数，结果集
    @RequestMapping("/findPage")
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
        PageResult pageResult =  travelGroupService.findPage(
                queryPageBean.getCurrentPage(),
                queryPageBean.getPageSize(),
                queryPageBean.getQueryString());
        return pageResult;
    }

/**
 * 封装查询条件
 * 封装查询条件传递给后端
 */
public class QueryPageBean implements Serializable{
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数
    private String queryString;//查询条件

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public String getQueryString() {
        return queryString;
    }

    public void setQueryString(String queryString) {
        this.queryString = queryString;
    }
}

服务接口
TravelGroupService

public interface TravelGroupService {
    PageResult findPage(Integer currentPage, Integer pageSize, String queryString);

服务实现类
**TravelGroupServiceImpl **

@Service(interfaceClass = TravelGroupService.class)
@Transactional
public class TravelGroupServiceImpl implements TravelGroupService {

    @Autowired
    private TravelGroupDao travelGroupDao;

    @Override
    public PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {
        // 使用分页插件PageHelper，设置当前页，每页最多显示的记录数
        PageHelper.startPage(currentPage,pageSize);
        // 响应分页插件的Page对象
        Page<TravelGroup> page = travelGroupDao.findPage(queryString);
        return new PageResult(page.getTotal(),page.getResult());
    }

Dao接口

public interface TravelGroupDao {
    Page<TravelGroup> findPage(String queryString);
    }

TravelGroupDao.xml

<!--    
   分页查询   concat: 在mysql的语法中，表示字符串的连接符，like %#{value}%
-->
<select id="findPage" parameterType="string" resultType="travelGroup">
    select * from t_travelgroup
    <where>
    <!-- 通过code、name模糊查询 helpCode 精确插叙-->
        <if test="value!=null and value.length>0">
            code =#{value} or name like "%"#{value}"%" or helpCode=#{value}
        </if>
    </where>
</select>

导包

			<!--mybatis的分页插件-->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>4.1.4</version>
            </dependency>