首先,创建一个新的HTML模板文件,例如pagination_ajax.html,用于渲染分页页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Pagination Example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function loadPage(page) {
$.ajax({
url: "/api/page/" + page,
type: "GET",
dataType: "json",
success: function(data) {
// 更新页面内容
$("#data-container").empty();
for (var i = 0; i < data.length; i++) {
$("#data-container").append("<p>" + data[i] + "</p>");
}
// 更新分页信息
$("#current-page").text(page);
},
error: function() {
alert("Failed to load data.");
}
});
}
</script>
</head>
<body>
<div id="data-container">
<!-- 数据显示区域 -->
</div>
<div>
<button onclick="loadPage(1)">First</button>
<button onclick="loadPage(prevPage)">Previous</button>
<span id="current-page">1</span>
<button onclick="loadPage(nextPage)">Next</button>
</div>
</body>
</html>
然后,更新GoFrame的路由处理函数:
package main
import (
"github.com/gogf/gf/frame/g"
"github.com/gogf/gf/net/ghttp"
"github.com/gogf/gf/util/gconv"
)
func main() {
s := g.Server()
// 模拟数据库数据
dataList := make([]string, 100)
for i := 0; i < 100; i++ {
dataList[i] = "Data" + gconv.String(i+1)
}
// 每页显示的数据数量
pageSize := 10
// 设置路由
s.BindHandler("/api/page/{page}", func(r *ghttp.Request) {
page, err := r.GetInt("page")
if err != nil || page <= 0 {
page = 1
}
// 计算分页数据范围
start := (page - 1) * pageSize
end := page * pageSize
if end > len(dataList) {
end = len(dataList)
}
// 获取当前页的数据
pageData := dataList[start:end]
// 返回JSON格式的数据
r.Response.WriteJson(pageData)
})
// 渲染Ajax分页页面
s.BindHandler("/ajax", func(r *ghttp.Request) {
r.View("pagination_ajax.html")
})
// 启动服务器
s.Run()
}
在这个例子中,我们添加了一个新的路由/api/page/{page},用于处理Ajax请求,返回指定页的数据。前端通过JavaScript的loadPage函数发起Ajax请求,获取数据后更新页面内容。页面上的按钮点击时,会调用loadPage函数请求相应的页码。
这只是一个简单的示例,实际中你可能需要更多的错误处理、分页信息的传递等。确保前后端的交互满足你的业务需求。
转载请注明出处:http://www.zyzy.cn/article/detail/7855/GoFrame