代码 Gin 与 Layui 分页 HTML 生成工具

2024-11-19 09:20:21 +0800 CST views 518

Gin 与 Layui 分页 HTML 生成工具

这个 Go 代码片段是一个用于在 Gin 框架中生成基于 Layui 样式的分页 HTML 工具。它接收当前页数、总项目数、每页项目数以及基本 URL,并生成适当的分页 HTML 代码,以便前端显示分页导航。

功能与使用方法

导入包

import (
	"fmt"
	"math"
	"strings"
)

函数说明

func Pagination(currentPage, totalItems, pageSize int, baseUrl string) string {
    // 计算总页数
	totalPages := int(math.Ceil(float64(totalItems) / float64(pageSize)))
	if totalPages <= 1 {
		return ""
	}

    // 根据 baseUrl 是否已包含查询参数进行调整
	if strings.Contains(baseUrl, "?") {
		baseUrl += "&"
	} else {
		baseUrl += "?"
	}

    // 使用字符串构建器生成分页 HTML
	var sb strings.Builder
	sb.WriteString(`<div id="demo-laypage-normal-2"><div class="layui-box layui-laypage layui-laypage-default">`)

    // 生成 "上一页" 按钮
	if currentPage > 1 {
		prevPage := currentPage - 1
		sb.WriteString(fmt.Sprintf(`<a class="layui-laypage-prev" data-page="%d" href="%spage=%d">上一页</a>`, prevPage, baseUrl, prevPage))
	} else {
		sb.WriteString(`<a class="layui-laypage-prev layui-disabled">上一页</a>`)
	}

    // 设置页码显示范围
	startPage := currentPage - 2
	endPage := currentPage + 2

	if startPage < 1 {
		startPage = 1
	}
	if endPage > totalPages {
		endPage = totalPages
	}

    // 处理首页和省略号
	if startPage > 1 {
		sb.WriteString(fmt.Sprintf(`<a data-page="1" href="%spage=1">1</a>`, baseUrl))
		if startPage > 2 {
			sb.WriteString(`<span class="layui-laypage-spr">...</span>`)
		}
	}

    // 生成中间的页码按钮
	for i := startPage; i <= endPage; i++ {
		if i == currentPage {
			sb.WriteString(fmt.Sprintf(`<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>%d</em></span>`, i))
		} else {
			sb.WriteString(fmt.Sprintf(`<a data-page="%d" href="%spage=%d">%d</a>`, i, baseUrl, i, i))
		}
	}

    // 处理尾页和省略号
	if endPage < totalPages {
		if endPage < totalPages-1 {
			sb.WriteString(`<span class="layui-laypage-spr">...</span>`)
		}
		sb.WriteString(fmt.Sprintf(`<a data-page="%d" href="%spage=%d">%d</a>`, totalPages, baseUrl, totalPages, totalPages))
	}

    // 生成 "下一页" 按钮
	if currentPage < totalPages {
		nextPage := currentPage + 1
		sb.WriteString(fmt.Sprintf(`<a class="layui-laypage-next" data-page="%d" href="%spage=%d">下一页</a>`, nextPage, baseUrl, nextPage))
	} else {
		sb.WriteString(`<a class="layui-laypage-next layui-disabled">下一页</a>`)
	}

	sb.WriteString(`</div></div>`)
	return sb.String()
}

使用示例

假设你有一个网站的分页需求,可以使用此工具生成相应的分页导航:

currentPage := 3
totalItems := 100
pageSize := 10
baseUrl := "http://example.com/list"

paginationHtml := Pagination(currentPage, totalItems, pageSize, baseUrl)
fmt.Println(paginationHtml)

输出

该函数将生成类似以下的 HTML 输出,用于展示分页导航:

<div id="demo-laypage-normal-2"><div class="layui-box layui-laypage layui-laypage-default">
    <a class="layui-laypage-prev" data-page="2" href="http://example.com/list?page=2">上一页</a>
    <a data-page="1" href="http://example.com/list?page=1">1</a>
    <span class="layui-laypage-spr">...</span>
    <a data-page="2" href="http://example.com/list?page=2">2</a>
    <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>3</em></span>
    <a data-page="4" href="http://example.com/list?page=4">4</a>
    <a data-page="5" href="http://example.com/list?page=5">5</a>
    <span class="layui-laypage-spr">...</span>
    <a data-page="10" href="http://example.com/list?page=10">10</a>
    <a class="layui-laypage-next" data-page="4" href="http://example.com/list?page=4">下一页</a>
</div></div>

总结

此分页工具函数可在使用 Gin 框架和 Layui 前端框架的项目中轻松生成分页导航。它考虑了常见的分页需求,如处理首页、尾页、上一页、下一页的逻辑,以及当页码较多时自动生成省略号,使得页面更加简洁和美观。

复制全文 生成海报 编程 Web开发 前端 后端 分页

推荐文章

为什么大厂也无法避免写出Bug?
2024-11-19 10:03:23 +0800 CST
一个简单的html卡片元素代码
2024-11-18 18:14:27 +0800 CST
windows安装sphinx3.0.3(中文检索)
2024-11-17 05:23:31 +0800 CST
Vue3中如何进行性能优化?
2024-11-17 22:52:59 +0800 CST
Golang 随机公平库 satmihir/fair
2024-11-19 03:28:37 +0800 CST
Manticore Search:高性能的搜索引擎
2024-11-19 03:43:32 +0800 CST
html一个包含iPhoneX和MacBook模拟器
2024-11-19 08:03:47 +0800 CST
php内置函数除法取整和取余数
2024-11-19 10:11:51 +0800 CST
CSS 实现金额数字滚动效果
2024-11-19 09:17:15 +0800 CST
设置mysql支持emoji表情
2024-11-17 04:59:45 +0800 CST
支付轮询打赏系统介绍
2024-11-18 16:40:31 +0800 CST
Vue3中的v-model指令有什么变化?
2024-11-18 20:00:17 +0800 CST
Vue3中如何进行错误处理?
2024-11-18 05:17:47 +0800 CST
PHP 唯一卡号生成
2024-11-18 21:24:12 +0800 CST
Vue 中如何处理跨组件通信?
2024-11-17 15:59:54 +0800 CST
Roop是一款免费开源的AI换脸工具
2024-11-19 08:31:01 +0800 CST
filecmp,一个Python中非常有用的库
2024-11-19 03:23:11 +0800 CST
防止 macOS 生成 .DS_Store 文件
2024-11-19 07:39:27 +0800 CST
向满屏的 Import 语句说再见!
2024-11-18 12:20:51 +0800 CST
程序员茄子在线接单