列表分页切换无刷新

最新推荐文章于 2022-05-12 16:25:33 发布

dongpengli

最新推荐文章于 2022-05-12 16:25:33 发布

阅读量630

点赞数 1

本文链接：https://blog.csdn.net/A7695895/article/details/55212247

版权

采用的是vue.js,当然了，angular也是可以的，只要支持数据绑定就可以

var app = new Vue({
    el: '#app',
    data: {
        todos: ""
    }
})
$("#page").pagination({
    pageSize: 10,
    remote: {
        url: 'listdata',
        success: function (data) {
            debugger
            // data为ajax返回数据
            app.todos=data.list;
        },
        totalName:'total'
    }
});

html

<tr v-for="good in todos">
    <td>{{good.id}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td>{{good.catId}}</td>
    <td><button class="layui-btn layui-btn-mini">操作</button></td>
</tr>

java

@RequestMapping(value = "/listdata",produces = {"application/text;charset=UTF-8"})
@ResponseBody
public String listdata(Integer pageIndex,Pager pager,TgGoods  tgGoods, HttpServletRequest request, HttpServletResponse response){
   pager.setPageNum(pageIndex);
   pager = tgGoodsService.findPageList(tgGoods,pager);
   return JSONObject.toJSONString(pager);
}