Beego学习笔记6:分页的实现

实现分页的效果

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>分页的注意点:

Beego学习笔记6:分页的实现的更多相关文章

Beego 学习笔记14：Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
Beego学习笔记——Logs
日志处理这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...
Beego学习笔记——Config
配置文件解析这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...
Beego学习笔记——开始
beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...
Beego学习笔记
Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...
Beego 学习笔记15：布局页面
页面布局 1> 一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2> ...
Beego 学习笔记7：JS分页
JS分页 1> JS分页,业务逻辑 (1) 分页采用的是一个叫jquery.pagination.js的一个jquery插件 (2) 需要jquery的支持,此项目中使用 ...
Beego学习笔记5:MVC-VC
MVC-VC 1> 新建一个user.go控制器,其代码如下: package controllers import ( "webapp/models" " ...
Beego学习笔记四:编写Model
MVC实践一:编写模型 1> 打开mysql数据库,设计表的结构 <1>登录mysql数据库,如下 <2>这三个标注的参数皆有用,需要谨记. <3>创 ...

随机推荐

JavaScript的深克隆与浅克隆
JS数据类型分为两类: 基本类型(Number.Boolean.Undefined.Null.String.Symbol(ES6新加,此处不讨论))与引用类型(Object).原始类型存储的是对象的实 ...
10 使用 OpenCV、Kafka 和 Spark 技术进行视频流分析
问题引起基于分布式计算框架Spark的室内防盗预警系统首先用摄像头录一段视频,存在电脑里,下载一个ffmpeg的软件对视频进行处理,处理成一张张图片,然后通过hadoop里边的一个文件系统叫做hd ...
date命令的FORMAT中输入空格的几种方法
1.date +%Y-%m-%d\ (一个空格)%H:%M:%S 此命令中用了转义字符 \ ,将空格转义出来 2.date +%Y-%m-%d' '%H:%M:%S 此命令中的单引号内可以是一个或多 ...
selenium--多窗口操作
前戏想一想,我们为什么要获取窗口句柄呢?有什么用呢? 来假设一下,我们打开了一个网站,点击了一个按钮,新打开了一个页面,我们在新页面操作完成之后,需要回到原来的页面继续操作,这时候你如果继续操作原来 ...
const 变量在多个文件共享，如何验证两种不同的方式下，编译器是否会在多个文件下建立多个副本
对于const变量多个文件共享,当我们不希望编译器为每个文件分别生成独立的变量,而是像非常量对象一个,一处定义,多处声明并使用. 解决办法是,对于const变量,不管是声明还是定义都添加extern关 ...
Spring Events
https://www.baeldung.com/spring-events by Eugen Paraschiv Spring+ I just announced the new Learn Spr ...
【2019年05月07日】A股最便宜的股票
新钢股份(SH600782) - 当前便宜指数:193.2 - 滚动扣非市盈率PE:2.99 - 滚动市净率PB:0.87 - 动态年化股息收益率:1.68%- 新钢股份(SH600782)的历史市盈 ...
ORM之模型对象Model
模型对象Model Odoo的模型对象在odoo模块的models.py文件中,最基础的对象是BaseModel; Odoo的模型对象有三个:AbstractModel.Model.Transient ...
快速排序详解（C语言/python）
快速排序详解介绍: 快速排序于C. A. R. Hoare在1960年提出,是针对冒泡排序的一种改进.它每一次将需要排序的部分划分为俩个独立的部分,其中一个部分的数比的数都小.然后再按照这个方法对这 ...
kafka参数解析+启动参数解析
Kafka参数详解每个kafka broker中配置文件server.properties默认必须配置的属性如下: broker.id=0 num.network.threads=2 num.io. ...

Beego学习笔记6:分页的实现

Beego学习笔记6:分页的实现的更多相关文章

随机推荐

热门专题