Vue下的el-table+spring+hibernate实现分页操作

之前一直用的是jquery的datatable实现分页效果，第一次使用vue下的element-ui，此篇博客记录一下踩坑后的实现。

首先，html页面
这边就不赘述，可去官网看文档

http://element-cn.eleme.io/#/zh-CN/component/pagination

<div id="tabs">
<el-row>
    <el-table ref="table"
     :data="tableData"
      border tooltip-effect="dark"
     style="width:100%"
     @selection-change="handleSelectionChange">
   <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
   <el-table-column prop="jsdw" label="接收单位名称" show-overflow-tooltip></el-table-column>
   <el-table-column prop="xxnr" label="内容" show-overflow-tooltip></el-table-column>                   <el-table-column prop="cjsj" label="发布时间" show-overflow-tooltip></el-table-column>
   <el-table-column prop="ckzt" label="查看状态" :formatter="status" show-overflow-tooltip></el-table-column>
   </el-table>
</el-row>
<!--列表底部工具条和分页符-->
   <el-row>
    <div class="selectPages">
     <el-pagination
     background
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page.sync="currentPage"
     :page-sizes="[10, 20, 30, 40]"
     :page-size="pagesize"
     layout="total, prev, pager, next, jumper"
     :total="totalCount">
 </el-pagination>
   </div>
  </el-row>
<div>

然后是js

var Main = new Vue({
    el: '#tabs',
    data:{
            //默认每页数据量
            pagesize: 10,
            //默认当前页码
            currentPage: 1,
            //查询的页码
            start: 1,
            //默认数据总数
            totalCount: 1000,
            tableData: [],
            multipleSelection: [],
            url:'/industry/messages'
    },
    methods: {
        //从服务器读取数据
        loadData: function(criteria, pageNum, pageSize){
            this.$http.get(this.url,
                {params: {parameter:criteria,//查询值，可不加
                    pageNum:pageNum,//当前页码
                    pageSize:pageSize//每页数量
                    }},
                ).then(function(res){
                this.tableData = res.data.content;
                this.totalCount = res.data.totalElements;
            },function(){
                console.log('failed');
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //每条页数修改会触发
        handleSizeChange(val) {
            this.pagesize = val;
            this.loadData(this.criteria, this.currentPage, this.pagesize);
        },
        //当前页面修改会触发
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadData(this.criteria, this.currentPage, this.pagesize);
        },
        
        //查看状态
        status: function(row, column){
            if(row.ckzt === 0){
                return "未查看";
            }else if(row.ckzt === 1){
                return "已查看";
            }
        },
    }
});

Main.loadData(Main.criteria, Main.currentPage, Main.pagesize);

要注意的几个点

• this.$http.get()使用要导入包

< script src=“https://lib.baomitu.com/vue-resource/1.5.1/vue-resource.js”>< /script>

• get传参要用 params: {} （这里害我浪费了好多时间）

接着就是后端了，先是controller

   /**
     * table
     *
     * @param search
     * @return
     */
    @GetMapping("/messages")
    @ResponseBody
    public String queryPeccancy(@ModelAttribute MessageForm.Search search) {
        //搜索
        Page<Fsxx> pageResult = industryService.queryFsxxs(search);
        //通过Json字符串返回前端
        return JSON.toJSONString(pageResult);
    }

这里没什么，接着是service和dao层，就放一起了

public Page<Fsxx> queryFsxxs(MessageForm.Search search) {
        //分页数据处理
        Pageable pageable = new PageRequest(search.getPageNum() - 1, search.getPageSize(), new Sort("id"));
        Page<Fsxx> result = fsxxDao.findMessages(pageable);
        return result;
    }
    
   //dao层：
    @Query("select f from Fsxx f where f.sc =0")
    Page<Fsxx> findMessages2(Pageable pageable);

注意的几个点

• 用@ModelAttribute获取里面参数要有pageNum，pageSize，还有自己要加的查询值
• 分页数据 search.getPageNum() - 1, search.getPageSize() 做分页查询

经过一天钻研把没接触过的东西实现，还是有些小成就感，总的来说也不难，主要是碰到小错误要耐心寻找，善于使用调试。