springboot+freemarker+bootstrap快速實現分頁功能(含java源碼)

時間 2019-11-17

標籤 springboot+freemarker+bootstrap springboot freemarker bootstrap 快速實現分頁功能 java 源碼欄目 Spring 简体版

原文原文鏈接

本節是創建在上節的基礎上，上一節給你們講了管理後臺表格如何展現數據，可是當咱們的數據比較多的時候咱們就須要作分頁處理了。這一節給你們講解如何實現表格數據的分頁顯示。css

準備工做

1，項目要引入freemarker和bootstrap，若是不知道怎麼引入的，請查看《10小時入門java開發03 springboot+freemarker+bootstrap快速實現管理後臺》

仍是老規矩，看效果圖

能夠看出咱們實現了以下功能html

1，表格數據的展現
2，分頁效果的實現
3，上一頁和下一頁的實現
4，當前選中頁碼加劇顏色

下面來看實現步驟

一，定義表格和分頁組件

簡單說說代碼java

head裏面是引入bootstrap的樣式庫
table定義表格來展現數據
ul裏定義分頁代碼以下：

<html>
<head>
	<meta charset="utf-8">
	<title>freemarker+bootstrap學習</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<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>id</th>
					<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>
複製代碼

二，定義好頁面後，咱們就來獲取數據

一樣這裏的數據咱們先用模擬數據，後面會用數據庫裏的數據。看下面代碼能夠看出來，咱們模擬了6條數據，而後每頁顯示2條數據。web

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學習
 */
@RestController
public class DemoController {

    /*
     * 分頁效果的實現
     * */
    @GetMapping("/pageList")
    public ModelAndView list(@RequestParam(value = "page", defaultValue = "1") Integer page,
                             @RequestParam(value = "size", defaultValue = "2") Integer size,
                             Map<String, Object> map) {
        List<Demo> 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<Demo> 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);
    }
}
複製代碼