分页插件的使用

/**
* 通过ajax向控制层发送数据,接收到分页插件得到的数据,page * pn为分页查询的id号
*/ function loadData(pn){ $(".allCheckbox").prop("checked",false); $(".data_tr").remove(); $.post("findAllQuestion", {"pn":pn}, function(page) { $.each(page.list, function(index, item) { var tr=$("<tr class='data_tr''>"+ "<td>"+item.questionotherid+"</td>"+ "<td>"+item.questionothername+"</td>"+ "<td>"+item.questionall.questionname+"</td>"+ "<td>"+item.questionid+"</td>"+ "<td>"+item.questionanswer+"</td>"+ "<td>"+getMyDate(item.questiondate)+"</td>"+ "<td><a href='#' data-toggle='modal' data-target='#myModal' onclick='getTable("+item.questionotherid+")'>详情/修改</a>|"+ "<a href='#' onclick='getdel("+item.questionotherid+")'>删除</a></td></tr>").appendTo($("tbody")); }); maxPag = page.pages; currentPage = page.pageNum; loadPaging(page); },"JSON") }

 

/**
* 首页,下一页,上一页,末页 的显示 * 分页查询显示信息
*/ function loadPaging(page){ $(".text-right").remove(); var nav = $("<nav class='text-right'></nav>"); var ul = $("<ul class='pagination'><li><a onclick='loadData(1)' aria-label='Previous'> 首页 </a></li>"+ "<li><a onclick='loadData("+(page.pageNum-1)+")' aria-label='Previous'> <span aria-hidden='true'>上一页</span></a></li></ul>").appendTo(nav); $.each(page.navigatepageNums,function(index,item){ var li=$("<li><a onclick='loadData("+item+")'>"+item+"</a></li>").appendTo(ul); if(page.pageNum==item){ li.addClass("active"); } }); var edit_btn=$("<li><a onclick='loadData("+(page.pageNum+1)+")' aria-label='Next'> <span aria-hidden='true'>下一页</span></a></li>"+ "<li><a onclick='loadData("+page.pages+")' aria-label='Next'> 末页 </a></li>").appendTo(ul); nav.appendTo($("#paging")); }
     
  //pageHelper插件的使用,需要导入jar包
  @RequestMapping("/findAllUser") @ResponseBody public PageInfo<User> pageHelper(@RequestParam(defaultValue="1") Integer pn) { PageHelper.startPage(pn, 10); List<User> list = userService.queryAllUser(); PageInfo<User> page = new PageInfo<>(list,7); System.out.println(page); return page; }

 前台得引入bootstrap的css文件,可在官网下载:http://www.bootcss.com/

 

转载于:https://www.cnblogs.com/han-guang-xue/p/9852912.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值