實現分頁的效果 1> 分頁的實現的業務邏輯 1->每個頁面顯示N條數據,總的數據記錄數M,則分頁的個數為M%N==0?M/N:M/N+1; 2->頁面渲染分頁的html部分 3>切換頁數,以及輸入參數,後臺處理,重新獲取新的滿足條件的數據 4>分頁的方法,js分頁,以及後臺分頁(下麵的分頁就是實現後 ...
實現分頁的效果
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>分頁的註意點: