做打牌的网站怎么办,it人力外包服务,网站的运营维护,网站开发员招聘本节是建立在上节的基础上#xff0c;上一节给大家讲了管理后台表格如何展示数据#xff0c;但是当我们的数据比较多的时候我们就需要做分页处理了。这一节给大家讲解如何实现表格数据的分页显示。准备工作1#xff0c;项目要引入freemarker和bootstrap#xff0c;如果不知… 本节是建立在上节的基础上上一节给大家讲了管理后台表格如何展示数据但是当我们的数据比较多的时候我们就需要做分页处理了。这一节给大家讲解如何实现表格数据的分页显示。准备工作1项目要引入freemarker和bootstrap如果不知道怎么引入的请查看《10小时入门java开发03 springbootfreemarkerbootstrap快速实现管理后台》还是老规矩看效果图可以看出我们实现了如下功能1表格数据的展示2分页效果的实现3上一页和下一页的实现4当前选中页码加重颜色下面来看实现步骤一定义表格和分页组件简单说说代码head里面是引入bootstrap的样式库table定义表格来展示数据ul 里定义分页代码如下htmlhead meta charsetutf-8 titlefreemarkerbootstrap学习title meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno link relstylesheethrefhttps://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.cssheadbodydiv classcontainer-fluid div classrow clearfix div classcol-md-12 column table classtable table-bordered table-condensed table-striped thead tr thidth th姓名th th微信th th colspan2操作th tr thead tbody #list productInfoPage as productInfo tr td${productInfo.id}td td${productInfo.name}td td${productInfo.wechat}td td #if productInfo.id%2 0 a href#下架a #else a href上架a #if td tr #list tbody table div #--分页-- div classcol-md-12 column ul classpagination #if currentPage lte 1 li classdisabled a classpage-link href#上一页ali #else li a classpage-link href/pageList?page${currentPage - 1}size${size}上一页a li #if #list 1..totalPage as index #if currentPage index li classpage-item active a classpage-link href#${index}a li #else li a classpage-link href/pageList?page${index}size${size} ${index}a li #if #list #if currentPage gte totalPage li classdisabled a classpage-link href#下一页ali #else li a classpage-link href/pageList?page${currentPage 1}size${size}下一页a li #if ul div divdivbodyhtml二定义好页面后我们就来获取数据同样这里的数据我们先用模拟数据后面会用数据库里的数据。看下面代码可以看出来我们模拟了6条数据然后每页显示2条数据。package com.qcl.demo.controller;import com.qcl.demo.bean.Demo;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.List;import java.util.Map;/** * Created by qcl on 2019-04-29 * 微信2501902696 * desc:freemarker学习 */RestControllerpublic class DemoController { /* * 分页效果的实现 * */ GetMapping(/pageList) public ModelAndView list(RequestParam(value page, defaultValue 1) Integer page, RequestParam(value size, defaultValue 2) Integer size, MapString, Object map) { List demoList new ArrayList(4); demoList.add(new Demo(1, 标题1, 编程小石头1, 2501902696)); demoList.add(new Demo(2, 标题2, 编程小石头2, 2501902696)); demoList.add(new Demo(3, 标题3, 编程小石头3, 2501902696)); demoList.add(new Demo(4, 标题4, 编程小石头4, 2501902696)); demoList.add(new Demo(5, 标题5, 编程小石头4, 2501902696)); demoList.add(new Demo(6, 标题6, 编程小石头4, 2501902696)); demoList.add(new Demo(7, 标题7, 编程小石头7, 2501902696));int start (page - 1) * 2;int end start size;List subList demoList.subList(start, end);int totalPage (int) Math.ceil(demoList.size() / size); map.put(productInfoPage, subList); map.put(totalPage, totalPage); map.put(currentPage, page); map.put(size, size);return new ModelAndView(demo/list, map); }}三启动springboot查看效果。注意每一页地址栏的url可以看出我们第一次访问时默认显示第一页url里没有page和size字段。访问第2页和第3页时url里就有了page和size。page是显示那一页size是每页显示多少条数据。到这里我们就实现的管理后台的分页效果。我会把10小时实战入门java系列课程录制成视频如果你看文章不能很好的理解可以去看下视频https://edu.csdn.net/course/detail/23443编程小石头码农一枚非著名全栈开发人员。分享自己的一些经验学习心得希望后来人少走弯路少填坑。
