[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,但是我觉得没有这种实现更简单,有兴趣的可以去研究研究。
[Beego] [bootstrap-paginator]实现分页功能相关推荐
- java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 还是老规矩,看效果图 可 ...
- bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...
- spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录 前言 正文 业务场景 后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- 简单的beego分页功能代码
一个简单的beego分页小插件(源代码在最下面): 支持条件查询 支持参数保留 支持自定义css样式 支持表/视图 支持参数自定义 默认为pno 支持定义生成链接的个数 使用方式: 1)action中 ...
- paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...
- bootstrap分页插件php,bootstrap paginator分页插件使用方法
Bootstrap Paginator是一款基于Bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家. 分页有 ...
- django高级应用(分页功能)
django高级应用(分页功能) 1.原生分页应用 前端html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 < ...
最新文章
- Android SDK与API版本的对应关系
- 了解Java中的检查与未检查异常
- linux怎么使多条命令同时执行
- 选择排序算法流程图_常用排序算法之选择排序
- Cognos11中通过URL访问report的设置
- 计算机新生导论感言,新生入学感言范文精选
- 从 virtio 网卡收包段错误问题出发反思个人问题分析的过程
- 软考常用计算公式及理解
- Terms-level Query之Fuzzy Query
- Reference详解
- 基于 OpenSSH 的身份认证与密钥管理
- js数组计算假设一张纸为0.01米 对折多少次后能比珠穆朗玛峰高
- python小球游戏代码
- 程序设计综合实践——京东管理系统(C语言实现)
- java内变速折叠自行车,电动助力+内变速 小米骑记折叠自行车评测
- 一款强大的端口扫描工具(nmap)
- 商务团队建设PPT模板
- 记录一下Jetson突然无法识别csi219相机笔记
- 【斐波那契LDPC】基于斐波那契序列的QC-LDPC改进,译码采用LLR-BP译码算法
- 单片机驱动AT24C02存储芯片
热门文章
- Kubernetes CRD开发模式及源码实现深入剖析-Kubernetes商业环境实战
- 从xtrabackup备份恢复单表【转】
- Flume 中文入门手冊
- Javascript学习之函数(function)
- B/S和C/S架构图解
- Hexo之部署github
- 【转】企业开发的困境与变局
- ManualResetEvent用法
- c#a服务器上传文件b服务器,C#_c#批量上传图片到服务器示例分享,客户端代码:
复制代码 代码 - phpStudy...
- java url接口_javaweb 后台使用url接口