實現分頁的效果
1> 分頁的實現的業務邏輯
1->每個頁面顯示N條數據，總的數據記錄數M,則分頁的個數為M%N==0?M/N:M/N+1;
2->頁面渲染分頁的html部分
3>切換頁數，以及輸入參數，后台處理，重新獲取新的滿足條件的數據
4>分頁的方法，js分頁，以及后台分頁（下面的分頁就是實現后台分頁）
2>在models分頁夾下，新建一個pager.go的模型，作為分頁模型的結構使用。其代碼如下:
package models
import (
"math"
_ "github.com/go-sql-driver/mysql"
)
//分頁方法，根據傳遞過來的頁數，每頁數，總數，返回分頁的內容 7個頁數 前 1，2，3，4，5 后 的格式返回,小於5頁返回具體頁數
func Paginator(page, prepage int, nums int64) map[string]interface{} {
var firstpage int //前一頁地址
var lastpage int //后一頁地址
//根據nums總數，和prepage每頁數量 生成分頁總數
totalpages := int(math.Ceil(float64(nums) / float64(prepage))) //page總數
if page > totalpages {
page = totalpages
}
if page <= 0 {
page = 1
}
var pages []int
switch {
case page >= totalpages-5 && totalpages > 5: //最后5頁
start := totalpages - 5 + 1
firstpage = page - 1
lastpage = int(math.Min(float64(totalpages), float64(page+1)))
pages = make([]int, 5)
for i, _ := range pages {
pages[i] = start + i
}
case page >= 3 && totalpages > 5:
start := page - 3 + 1
pages = make([]int, 5)
firstpage = page - 3
for i, _ := range pages {
pages[i] = start + i
}
firstpage = page - 1
lastpage = page + 1
default:
pages = make([]int, int(math.Min(5, float64(totalpages))))
for i, _ := range pages {
pages[i] = i + 1
}
firstpage = int(math.Max(float64(1), float64(page-1)))
lastpage = page + 1
//fmt.Println(pages)
}
paginatorMap := make(map[string]interface{})
paginatorMap["pages"] = pages
paginatorMap["totalpages"] = totalpages
paginatorMap["firstpage"] = firstpage
paginatorMap["lastpage"] = lastpage
paginatorMap["currpage"] = page
return paginatorMap
}
3> 在views文件夾下，新建一個list.html頁面作為顯示分頁的效果。其代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>首頁 - 用戶列表頁面</title>
<link rel="shortcut icon" href="/static/img/favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.am-cf{
height: 50px;
margin-top: 30px;
line-height: 50px;
text-align: center;
vertical-align: middle;
margin-left: 40%;
}
.am-fr{
float: left;
line-height: 50px;
text-align: center;
vertical-align: middle;
height: 50px;
margin-top: -15px;
}
.am-pagination{
list-style:none;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
}
.am-pagination li{
float:left;
margin-left: 10px;
}
.am-pagination li a{
text-decoration:none;
}
.am-jl{
float: left;
margin-left: 20px;
}
.am-active{
color: #f00;
}
</style>
</head>
<body>
<div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">
<a class="btn btn-success" href="/Home/Edit?Id=0">添加</a>
</div>
<table class="table table-striped table-hover table-bordered ">
<thead>
<th style="text-align: center">ID</th>
<th style="text-align: center">名稱</th>
<th style="text-align: center">昵稱</th>
<th style="text-align: center">密碼</th>
<th style="text-align: center">Email</th>
<th style="text-align: center">性別</th>
<th style="text-align: center">手機號</th>
<th style="text-align: center">操作</th>
</thead>
<tbody id="sortable">
{{range $index, $item := .datas}}
<tr class="sort-item" id="module_{{$item.Id}}" value="{{$item.Id}}">
<td style="text-align: center;width: 150px;"><span class="label label-default" >{{$item.Id}}</span></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Name}}</strong></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Nickname}}</strong></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Pwd}}</strong></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Email}}</strong></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Sex}}</strong></td>
<td style="text-align: center;width: 240px;" ><strong>{{$item.Phone}}</strong></td>
<td style="text-align: center;width: 150px;">
<a href="/Home/Edit?Id={{$item.Id}}" class="label label-info" title="修改" >修改</a>
<a href="/Home/Delete?Id={{$item.Id}}" class="label label-info" title="刪除">刪除</a>
</td>
</tr>
{{end}}
</tbody>
</table>
<div class="am-cf">
<div class="am-fr">
<ul class="am-pagination">
<li class=""><a href="/Home/List?page={{.paginator.firstpage}}">«</a></li>
{{range $index,$page := .paginator.pages}}
<li {{if eq $.paginator.currpage $page }}class="am-active"{{end}}>
<a href="/Home/List?page={{$page}}">{{$page}}</a></li>
{{end}}
<li><a href="/Home/List?page={{.paginator.lastpage}}">»</a></li>
</ul>
</div>
<div class="am-jl">
共{{.totals}}條記錄 共記{{.paginator.totalpages}} 頁 當前{{.paginator.currpage}}頁
</div>
</div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
</body>
</html>
4> 運行起來，看看效果
5> 下一章，實現js分頁的效果
6>分頁的注意點:
