[Beego] [bootstrap-paginator]实现分页功能

说明

在开发中分页功能几乎是必不可少的一项功能,使用beego框架开发时,就遇到了分页功能的需求。可能是之前版本并不支持,我发现有很多自己实现的分页功能的封装,在阅读了官方源码时,我发现了分页功能的封装,但是我觉得使用起来非常难用,后来在官方文档里发现,其给的示例中使用了前端的框架,把分页交给前端是个明智的选择。

以下为官方的示例:链接

type Page struct {PageNo     intPageSize   intTotalPage  intTotalCount intFirstPage  boolLastPage   boolList       interface{}
}
func PageUtil(count int, pageNo int, pageSize int, list interface{}) Page {tp := count / pageSizeif count % pageSize > 0 {tp = count / pageSize + 1}return Page{PageNo: pageNo, PageSize: pageSize, TotalPage: tp, TotalCount: count, FirstPage: pageNo == 1, LastPage: pageNo == tp, List: list}
}

可以看到,官方只是实现了根据总数和每页个数计算页数逻辑,那么更重要的,是在前端。

<script type="text/javascript" src="/static/js/bootstrap-paginator.min.js"></script>
<script type="text/javascript">$(function () {$("#page").bootstrapPaginator({currentPage: '{{.Page.PageNo}}',totalPages: '{{.Page.TotalPage}}',bootstrapMajorVersion: 3,size: "small",onPageClicked: function(e,originalEvent,type,page){window.location.href = "/?p=" + page}});});
</script>

前端也只是写了配置,对于刚上手的人来说,好像一头雾水。

思路

既然是前端作为主要实现,那么解决方案分为两种:
1. 把所有数据都传到前端,在前端实现对不同页数据的分割,这适用于数据量较小的情况。
2. 把一部分数据传到前端,只传需要分页的那一部分。这适用于大量的数据。

我这里讲的是后者的实现。

前端

根据github地址,找到相关项目,但其官网已经打不开了,只能去下载release版本:https://github.com/lyonlai/bootstrap-paginator/releases

解压后会有index.html的官方文档,里面讲了一些简单的用法,具体的配置也可以看这个:http://www.cnblogs.com/moretry/p/4441728.html

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.min.js"></script> 

需要引入相关文件,其中依赖bootstarp和jQuery>=1.8,在bootstarp2.x里必须用<div> 标签来使用,在bootstarp3.x里必须使用<ul> 标签来使用。

以下是我的写法,因为其将marginTop设置为20px,我不需要,所以又调了。

<script type="text/javascript">$(".page").bootstrapPaginator({currentPage: '{{.Page.PageNo}}',totalPages: '{{.Page.TotalPage}}',useBootstrapTooltip:'true',bootstrapMajorVersion: 3,size: "small",onPageClicked: function (e, originalEvent, type, page) {window.location.href = "/problems?p=" + page}});$(".pagination").css('margin',0)
</script>

在后端,我添加了对不合法页数的修正,同时又将返回的数据设置成了slice,当然在控制器传参时会出现一些问题,可以参考我前一篇文章的解决方案:链接

func PageUtil(count int, pageNo int, pageSize int, list []interface{}) Page {tp := count / pageSizeif count % pageSize > 0 {tp = count / pageSize + 1}if  pageNo < 1 || pageNo * pageSize >= count+pageSize{pageNo = 1}st,end := pageSize*(pageNo-1),pageSize*(pageNo)if st > count || st < 0{st = 0;}if end >count || end < 0 {end = count}pageList := list[st:end]
    return Page{PageNo: pageNo, PageSize: pageSize, TotalPage: tp, TotalCount: count, FirstPage: pageNo == 1, LastPage: pageNo == tp, List: pageList}
}

还有一种设计,是设计后端api,然后前端去ajax,但是我觉得没有这种实现更简单,有兴趣的可以去研究研究。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电磁波传播相位是否会变化_相位常数β与波数k是一回事吗?

1.相位常数β与波数k先明确一点&#xff1a;相位常数是指传输线&#xff0c;而波数是指平面波。1.1. 波数k wavenumber波数k&#xff1a;单位长度上有多少弧度&#xff1f;Jun.14.2019电磁波在材料中以光速 运动&#xff1a;材料的磁导率&#xff1a;材料的介电常数in free spa…

c#获取系统时间的方法

转:http://bbs.bc-cn.net/viewthread.php?tid238469 //今天DateTime.Now.Date.ToShortDateString();//昨天&#xff0c;就是今天的日期减一DateTime.Now.AddDays(-1).ToShortDateString();//明天&#xff0c;同理&#xff0c;加一DateTime.Now.AddDays(1).ToShortDateString()…

用python画出叶子_太疯狂了!原来用粉笔画画,也可以这么美,简单几招教你,美到邻居羡慕嫉妒...

......点进来之前先让大家瞧瞧相信这是用粉笔画的吗&#xff1f;▼玫瑰花▼山茶花▼蓝色鸢尾花▼樱花树▼这一张张让人直流鼻血的作品没错这就是用色粉笔画出来的很多人问&#xff1a;是不是平时老师上课时用的粉笔呢&#xff1f;这里给大家科普下&#xff1a;色粉画&#xff0…

jsonp react 获取返回值_必须要会的 50 个React 面试题(下)

翻译&#xff1a;疯狂的技术宅原文&#xff1a;https://www.edureka.co/blog/interview-questions/react-interview-questions29. 你对受控组件和非受控组件了解多少&#xff1f;受控组件非受控组件1. 没有维持自己的状态1. 保持着自己的状态2.数据由父组件控制2.数据由 DOM 控…

ASP.Net ListBox DropdownList 不同条目 设置 背景色 和 字体颜色

转载于:https://www.cnblogs.com/sjcatsoft/archive/2008/11/08/1329787.html

[jQuery] 根据表单的不同参数跳转不同的链接

说明 在实现前端的时候&#xff0c;我们有些需求是这样的&#xff1a; 1. 需要表单来向服务端get或post参数 2. 表单数据不只一个 3. 需要根据不同的提交的数据参数、类型等信息提交到不同 思路 把请求放到后端处理是可以的&#xff0c;但是显然这样处理会增加系统的复杂度&…

snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩

这是我们的历史文章。为让大家更好找到自己需要的软件&#xff0c;我们会在三条位置推送&#xff0c;那些备受关注的APP和软件。提到「截图」大家会想到什么呢&#xff1f;微信&#xff0c;QQ 或者 功能更加完善的截图工具&#xff1f;有想过「截图」可以这样用吗&#xff1f;还…

python的函数_Python 返回函数+匿名函数

返回函数 粗粗看了一遍学习资料&#xff0c;感觉返回函数的意思好理解&#xff0c;但是实际应用起来就有点麻烦了。 先捋一捋思路叭。 首先&#xff0c;高阶函数除了能接收函数作为参数外&#xff0c;也能将函数作为结果值返回。 函数作为返回值 拿 求和 做个简单的例子&#x…

简述WebService与.NET Remoting的区别及适应场合

为了能清楚地描述Web Service 和Remoting之间的区别,我打算从他们的体系结构上来说起: Web Service大体上分为5个层次: 1. Http传输信道 2. XML的数据格式 3. SOAP封装格式 4. WSDL的描述方式 5. UDDI 总体上来讲&#xff0c;.NET 下的 Web Service结构比较简单&#xff0c;也比…

[Golang]计算一个文件的MD5值

说明 在实际的开发过程中&#xff0c;总需要对文件进行md5加密的需求&#xff0c;在开发过程中&#xff0c;我就遇到了将表单文件MD5后再存储本地的需求。 解决 MD5的所需要的包在”crypto/md5”包中&#xff0c;需要先实例化一个MD5对象&#xff0c;然后在此基础上调用sum方法…

lisp捕捉垂足_定位-'Cal计算器

命令CAL&#xff0c;右键菜单选择“快速计算器”或CTRL8都可以打开计算器。使用 CAL 命令&#xff0c;用户可以&#xff1a;一.)获取点1.使用光标获取点用 cur 函数。程序会提示用户指定点并使用当前的 UCS 点的坐标值。cur 函数用于设置系统变量 lastpoint的值。2.获取交点ill…

plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来

千呼万唤始出来&#xff01;微信小程序页面分享到朋友圈的功能&#xff0c;终于在安卓系统灰度测试了&#xff01;目前只在安卓系统&#xff01;只在安卓系统&#xff01;只在安卓系统&#xff01;iOS系统还没有办法体验。首先&#xff0c;我们看一下官方文档的描述&#xff0c…

色彩的搭配

色彩的搭配是一门艺术&#xff0c;灵活运用它能让你的主页更具亲和力。当然这篇文章的内容还只限于理论&#xff0c;要想真的制作出漂亮的网页则需要灵活运用加上自己的创意才行。如果你有什么收获的话&#xff0c;可别忘了介绍给广大读者啊。 色彩的含义   色彩本身…

[读书笔记][golang]《go语言-云动力》

花了一些时间&#xff0c;读了樊剑虹的《go语言-云动力》&#xff0c;就这本书的整体情况来讲&#xff0c;还是值得读一读的&#xff0c;书中讲了一些另辟蹊径的东西&#xff0c;这可能是其他go语言书中不曾有的东西&#xff0c;但是就专业性来讲&#xff0c;是不值得推荐读的&…

mixin network_【译文】Mixin——以最高的安全性满足所有区块链资产的交易需求

一个免费的闪电般快速的数字资产端对端交易网络。01.概况Mixin 由一个理论上永久的内核、许多动态域和不同的多用途域扩展组成&#xff0c;以构成扩展的星形拓扑结构。Mixin Network 已经支持 BTC&#xff0c;BCH&#xff0c;ETH&#xff0c;EOS&#xff0c;ETC&#xff0c;SC&…

python脚本编程实例_C程序调用Python脚本的例子

下面我们一起来看看关于C程序调用Python脚本的例子&#xff0c;如果你对此有兴趣的希望此教程对各位同学会有所帮助。代码如下复制代码#include int main(){PyObject * g_pModule NULL;Py_Initialize(); //使用python之前&#xff0c;要调用Py_Initialize();这个函数进行初始化…

[golang]nil slice和empty slice的区别

前言 在开发的时候&#xff0c;会遇到对于nil slice和empty slice的问题&#xff0c;往往在声明了slice之后&#xff0c;在使用的时候却出现了问题。 问题 以下是错误的用法&#xff0c;会报数组越界的错误&#xff0c;因为只是声明了slice&#xff0c;却没有给实例化的对象&am…

socket通信需要网线连接吗_socket网络编程基础知识篇

网络通信是一种进程间通信(IPC,Inter-ProcessCommunication)&#xff0c;要求位于不同网络节点不同进程的通信双方必须遵循统一的通信协议方可实现。基于套接字(Socket)通信是应用在不同节点上的进程间通信的典型办法。1、基本原理1.1、 Socket API基本概念SocketAPI是TCP/IP网…

python柱形图代码_Python数据可视化:基于matplotlib绘制「条形图」

简介 条形图 &#xff08;bar chart&#xff09;是用宽度相同条形的高度或长短来表示数据多少的图形&#xff0c;可以横置或纵置。纵置时的条形图也称为 柱形图 &#xff08;column chart&#xff09;。 绘制条形图 1 import matplotlib.pyplot as plot 2 3 data [5., 25., 50…

Dreamweaver cs3快捷键大全

新建文档        CtrlN 打开一个 HTML文件   CtrlO或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开       CtrlShiftO 关闭           CtrlW 保存           CtrlS 另存为         CtrlShiftS 检查链接   …