說明

在開發(fā)中分頁功能幾乎是必不可少的一項功能，使用beego框架開發(fā)時，就遇到了分頁功能的需求。可能是之前版本并不支持，我發(fā)現(xiàn)有很多自己實現(xiàn)的分頁功能的封裝，在閱讀了官方源碼時，我發(fā)現(xiàn)了分頁功能的封裝，但是我覺得使用起來非常難用，后來在官方文檔里發(fā)現(xiàn)，其給的示例中使用了前端的框架，把分頁交給前端是個明智的選擇。

以下為官方的示例：鏈接

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} }

可以看到，官方只是實現(xiàn)了根據(jù)總數(shù)和每頁個數(shù)計算頁數(shù)邏輯，那么更重要的，是在前端。

<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>

前端也只是寫了配置，對于剛上手的人來說，好像一頭霧水。

思路

既然是前端作為主要實現(xiàn)，那么解決方案分為兩種：
1. 把所有數(shù)據(jù)都傳到前端，在前端實現(xiàn)對不同頁數(shù)據(jù)的分割，這適用于數(shù)據(jù)量較小的情況。
2. 把一部分?jǐn)?shù)據(jù)傳到前端，只傳需要分頁的那一部分。這適用于大量的數(shù)據(jù)。

我這里講的是后者的實現(xiàn)。

前端

根據(jù)github地址，找到相關(guān)項目，但其官網(wǎng)已經(jīng)打不開了，只能去下載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>

需要引入相關(guān)文件，其中依賴bootstarp和jQuery>=1.8，在bootstarp2.x里必須用<div> 標(biāo)簽來使用，在bootstarp3.x里必須使用<ul> 標(biāo)簽來使用。

以下是我的寫法，因為其將marginTop設(shè)置為20px，我不需要，所以又調(diào)了。

<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>

在后端，我添加了對不合法頁數(shù)的修正，同時又將返回的數(shù)據(jù)設(shè)置成了slice，當(dāng)然在控制器傳參時會出現(xiàn)一些問題，可以參考我前一篇文章的解決方案：鏈接

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} }

還有一種設(shè)計，是設(shè)計后端api，然后前端去ajax，但是我覺得沒有這種實現(xiàn)更簡單，有興趣的可以去研究研究。

總結(jié)

以上是生活随笔為你收集整理的[Beego] [bootstrap-paginator]实现分页功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。