bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
生活随笔
收集整理的這篇文章主要介紹了
bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本節(jié)是建立在上節(jié)的基礎(chǔ)上，上一節(jié)給大家講了管理后臺表格如何展示數(shù)據(jù)，但是當(dāng)我們的數(shù)據(jù)比較多的時候我們就需要做分頁處理了。這一節(jié)給大家講解如何實(shí)現(xiàn)表格數(shù)據(jù)的分頁顯示。
準(zhǔn)備工作
1，項(xiàng)目要引入freemarker和bootstrap，如果不知道怎么引入的，請查看
《10小時入門java開發(fā)03 springboot+freemarker+bootstrap快速實(shí)現(xiàn)管理后臺》
還是老規(guī)矩，看效果圖
可以看出我們實(shí)現(xiàn)了如下功能
1，表格數(shù)據(jù)的展示
2，分頁效果的實(shí)現(xiàn)
3，上一頁和下一頁的實(shí)現(xiàn)
4，當(dāng)前選中頁碼加重顏色
下面來看實(shí)現(xiàn)步驟
一，定義表格和分頁組件
簡單說說代碼
head里面是引入bootstrap的樣式庫
table定義表格來展示數(shù)據(jù)
ul?里定義分頁
代碼如下：
<head>
????<meta?charset="utf-8">
????<title>freemarker+bootstrap學(xué)習(xí)title>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1,?shrink-to-fit=no">
????
????<link?rel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
head>
<body>
<div?class="container-fluid">
????<div?class="row?clearfix">
????????<div?class="col-md-12?column">
????????????<table?class="table?table-bordered?table-condensed?table-striped">
????????????????<thead>
????????????????<tr>
????????????????????<th>idth>
????????????????????<th>姓名th>
????????????????????<th>微信th>
????????????????????<th?colspan="2">操作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?class="col-md-12?column">
????????????<ul?class="pagination?">
????????????????<#if?currentPage?lte?1>
????????????????????<li?class="disabled?"><a?class="page-link"?href="#">上一頁a>li>
????????????????<#else>
????????????????????<li>
????????????????????????<a?class="page-link"?href="/pageList?page=${currentPage?-
????????????????????????1}&size=${size}">上一頁a>
????????????????????li>
????????????????#if>
????????????????<#list?1..totalPage?as?index>
????????????????????<#if?currentPage?==?index>
????????????????????????<li?class="page-item?active?"><a?class="page-link"?href="#">${index}a>
????????????????????????li>
????????????????????<#else>
????????????????????????<li>
????????????????????????????<a?class="page-link"?href="/pageList?page=${index}&size=${size}">
????????????????????????????????${index}a>
????????????????????????li>
????????????????????#if>
????????????????#list>
????????????????<#if?currentPage?gte?totalPage>
????????????????????<li?class="disabled?"><a?class="page-link"?href="#">下一頁a>li>
????????????????<#else>
????????????????????<li>
????????????????????????<a?class="page-link"?href="/pageList?page=${currentPage?+?1}&size=${size}">下一頁a>
????????????????????li>
????????????????#if>
????????????ul>
????????div>
????div>
div>
body>
html>
二，定義好頁面后，我們就來獲取數(shù)據(jù)
同樣這里的數(shù)據(jù)我們先用模擬數(shù)據(jù)，后面會用數(shù)據(jù)庫里的數(shù)據(jù)。
看下面代碼可以看出來，我們模擬了6條數(shù)據(jù)，然后每頁顯示2條數(shù)據(jù)。
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學(xué)習(xí)
?*/
@RestController
public?class?DemoController?{
????/*
?????*?分頁效果的實(shí)現(xiàn)
?????*?*/
????@GetMapping("/pageList")
????public?ModelAndView?list(@RequestParam(value?=?"page",?defaultValue?=?"1")?Integer?page,
?????????????????????????????@RequestParam(value?=?"size",?defaultValue?=?"2")?Integer?size,
?????????????????????????????Map<String,?Object>?map)?{
????????List?demoList?=?new?ArrayList<>(4);
????????demoList.add(new?Demo(1,?"標(biāo)題1",?"編程小石頭1",?"2501902696"));
????????demoList.add(new?Demo(2,?"標(biāo)題2",?"編程小石頭2",?"2501902696"));
????????demoList.add(new?Demo(3,?"標(biāo)題3",?"編程小石頭3",?"2501902696"));
????????demoList.add(new?Demo(4,?"標(biāo)題4",?"編程小石頭4",?"2501902696"));
????????demoList.add(new?Demo(5,?"標(biāo)題5",?"編程小石頭4",?"2501902696"));
????????demoList.add(new?Demo(6,?"標(biāo)題6",?"編程小石頭4",?"2501902696"));
????????demoList.add(new?Demo(7,?"標(biāo)題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
可以看出，我們第一次訪問時，默認(rèn)顯示第一頁，url里沒有page和size字段。
訪問第2頁和第3頁時，url里就有了page和size。page是顯示那一頁，size是每頁顯示多少條數(shù)據(jù)。
到這里我們就實(shí)現(xiàn)的管理后臺的分頁效果。
我會把10小時實(shí)戰(zhàn)入門java系列課程錄制成視頻，如果你看文章不能很好的理解，可以去看下視頻：https://edu.csdn.net/course/detail/23443
編程小石頭，碼農(nóng)一枚，非著名全棧開發(fā)人員。分享自己的一些經(jīng)驗(yàn)，學(xué)習(xí)心得，希望后來人少走彎路，少填坑。
總結(jié)
以上是生活随笔為你收集整理的bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 二十三、PHP框架Laravel学习笔记
- 下一篇： Java 运算符、表达式、语句