Beego Learning Notes 6: Paging Implementation

Implement Paging

1> Business logic for paging implementation

1->N data are displayed on each page. For the total number of data records M, the number of pages M%N==0?M/N:M/N+1;

2->Page Rendering Paging html Part

3>Switch pages, input parameters, background processing, and retrieve new eligible data

4>Paging method, js paging, and background paging (the following paging is the implementation of background paging)

2>Create a new one under the models page folderPager.goThe model used as the structure of the paging model.The code is as follows:

 

package models 

import (
	"math"
	_ "github.com/go-sql-driver/mysql"
)
//Paging method, returns the content of a page according to the number of pages passed in, the number of pages per page, the total number, the format after the first 1, 2, 3, 4, 5 of the seven pages of the page, returns the specific number of pages in less than 5 pages
func Paginator(page, prepage int, nums int64) map[string]interface{} {
	
		var firstpage int //Previous page address
		var lastpage int  //Address on the next page
		//Generate the total number of pages based on the total number of nums and the number of prepage s per page
		totalpages := int(math.Ceil(float64(nums) / float64(prepage))) //Total page s
		if page > totalpages {
			page = totalpages
		}
		if page <= 0 {
			page = 1
		}
		var pages []int
		switch {
		case page >= totalpages-5 && totalpages > 5: //Last 5 pages
			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> Under the views folder, create a new oneList.htmlPage as the effect of displaying page breaks.The code is as follows:

 

<!DOCTYPE html>
 
<html>
      <head>
        <title>home page - User List Page</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">Add to</a>
        </div>
            
        <table class="table table-striped table-hover table-bordered ">
          <thead>
           <th style="text-align: center">ID</th>
           <th style="text-align: center">Name</th>
           <th style="text-align: center">Nickname?</th>
           <th style="text-align: center">Password</th>
           <th style="text-align: center">Email</th>
           <th style="text-align: center">Gender</th>
           <th style="text-align: center">Cell-phone number</th>
           <th style="text-align: center">operation</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="modify" >modify</a>
                <a href="/Home/Delete?Id={{$item.Id}}" class="label label-info" title="delete">delete</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">
                    //A total of {{totals}} records {{paginator.totalpages}} Page is currently {{.paginator.currpage}} Page
               </div>    
          </div>
        <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>       
        
    </body>
</html>

  

4> Run to see the effect

 

 

 

 

5> Next Chapter, Implementing js Paging

6>Paging Notes:

Keywords: Go JQuery github SQL MySQL

Added by whare on Sun, 19 Jul 2020 17:37:26 +0300