Beego學習筆記6:分頁的實現

来源:http://www.cnblogs.com/tudaogaoyang/archive/2017/12/04/7975708.html
-Advertisement-
Play Games

實現分頁的效果 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>分頁的註意點:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 資料庫中有一個City表 初始時數據: 實體類與Fluent Api配置映射 public class City { public int Id { get; set; } public string Name { get; set; } public int? ParentId { get; se ...
  • 獲取任意 VS 和 SQLServer 的 磁碟安裝目錄。 背景需求:如果磁碟電腦安裝了 VS 或者 SQLServer 則 認定這台電腦 的使用者 是一名 軟體研發人員,則讓程式 以最高許可權運行。 代碼如下:(基於註冊表讀取、exe版權信息校驗) static void Main(string[ ...
  • 安裝方式:使用vs自帶的nuget管理工具,搜索AutoMapper ,選擇第一個安裝到你的項目即可。 我從網上找了一些資料, 參考網址:http://blog.csdn.net/csethcrm/article/details/52934325 下載了個demo,然後自己又寫了一遍,我把AutoM ...
  • S#語言演變到如今,其實已經形成比較強的個性了,也有很多利弊。語言的個性是由其語法確定的,S#的基因就是公式系統,其設計、表達和核心庫在各種語言比較中絕對算的上是一流的,已支持近3800個函數或屬性或方法調用。 ...
  • 阻塞隊列(BlockingQueue)是一個支持兩個附加操作的隊列。這兩個附加的操作是:在隊列為空時,獲取元素的線程會等待隊列變為非空。當隊列滿時,存儲元素的線程會等待隊列可用。阻塞隊列常用於生產者和消費者的場景,生產者是往隊列里添加元素的線程,消費者是從隊列里拿元素的線程。阻塞隊列就是生產者存放元 ...
  • context.MapRoute( name: "Test1", //路由名稱 唯一 url: "Admin/{controller}/{action}/{year}/{month}/{day}", //URL規則(分區需增加區功能變數名稱稱常量,此處為Admin) defaults: new {... ...
  • 對象調用某個函數,並將所得結果做為參數,傳遞給另一個函數。而接受參數的函數本身也能夠調用前一個函數。 讓參數接受者去除該項參數,並直接調用前一個函數。 ...
  • 一、視圖函數: 請求對象 request: 1、HttpRequest.body: 請求原數據 2、HttpRequest.path: 一個字元串,表示請求的路徑組件(不含功能變數名稱) 3、HttpRequest.method 4、HttpRequest.GET 5、HttpRequest.POST 6、 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...