說明

在開發中分頁功能幾乎是必不可少的一項功能，使用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]实现分页功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。