Golang template简单实现分页

Golang Web前端数据分页展示

一：背景

最近要在前端界面上展示很多组数据，都放在一页不好看，所以想分页展示。但是不太想引入框架(出于简单考虑)，就想实现一个简单的分页机制。只用html/template原生的东西实现。

二：参考代码

之前看到有人用python写网页用过的简单的分页代码，具体代码如下：

源码：

<div class="pagination">  <ul>    $if current_page > delta + 1:        <li><a href="/result/$case_status/$result_id?page=1$para" title="Go to page 1">1</a></li>        <li><span>...</span></li>    $for i in range(delta, 0, -1):        $if current_page-i > 0:             <li><a href="/result/$case_status/$result_id?page=$(current_page-i)$para" title="Go to page $(current_page-i)">$(current_page-i)</a></li>    <li><span class="current">$current_page</span></li>    $for i in range(1,delta + 1):        $if current_page+i <= total_page:            <li><a href="/result/$case_status/$result_id?page=$(current_page+i)$para" title="Go to page $(current_page+i)">$(current_page+i)</a></li>    $if current_page + delta < total_page:        <li><span>...</span></li>        <li><a href="/result/$case_status/$result_id?page=$total_page$para" title="Go to page $total_page">$total_page</a></li>    </ul></div>

效果图：

基本效果就是最多当前页左右各5页可以点击，其他页用…代替，以免页数过多。

分析代码：

对这段代码进行分析，发现：

1. delta表示当前页左右最多可以显示几页，如果设置为5，则当前页左右最多各显示5页，剩下的用…代替
2. current_page代表当前页的页数
3. total_page代表总共的页数

三：用golang的template模板实现

经过研究发现，golang的template包功能并不足够强大，只能实现非常有限的功能，类似在模板中定义变量，之后对变量进行加1操作的功能都没有。所以只能在后端将所有需要的数据准备好，然后发送到前端进行渲染。这样分页的代码就显的不是十分直观。
其实理解了上面python的代码，这里go的实现只不过是对前面的公式进行了一下数学变换,将计算部分移动到后端而已。

后端代码：

type JobPageInfo struct {        Job         *JobInfo        Status      string        Cases       []*CaseInfo        CurrentPage int        TotalPage   int        I           []int        CPMI        []int        J           []int        CPAJ        []int        TPM5        int}

这里的 CurrentPage ；TotalPage ； I ； CPMI ； J ； CPAJ ；TPM5 是分页时需要的一些数据

i := []int{5, 4, 3, 2, 1}currentPageMinusI := []int{currentPage - 5, currentPage - 4, currentPage - 3,                   currentPage - 2, currentPage - 1}j := []int{1, 2, 3, 4, 5}currentPageAddJ := []int{currentPage + 1, currentPage + 2, currentPage + 3, currentPage + 4, currentPage + 5}totalPageMinus5 := totalPage - 5jobPage := JobPageInfo{Job: job, Status: status, Cases: selectCases, CurrentPage: currentPage, TotalPage: totalPage,I: i, CPMI: currentPageMinusI, J: j, CPAJ: currentPageAddJ, TPM5: totalPageMinus5}t, err := template.ParseFiles("./ui/templates/job.html")if err != nil {      return}err = t.Execute(w, jobPage)

这里的5即指的是python代码中的delta，调整delta，即对应的调整相关参数的范围即可

前端代码：

<div class="pagination">    <ul>        {{if gt .CurrentPage 6}}        <li><a href="/adsreg/jobs?status={{.Status}}&page=1" title="Go to page 1">1</a></li>        <li><span>...</span></li>        {{end}}        {{range .CPMI}}        {{if gt . 0}}        <li><a href="/adsreg/jobs?status={{$.Status}}&page={{.}}" title="Go to page {{.}}">{{.}}</a></li>        {{end}}        {{end}}        <li><span class="current">{{.CurrentPage}}</span></li>        {{range .CPAJ}}        {{if le . $.TotalPage}}        <li><a href="/adsreg/jobs?status={{$.Status}}&page={{.}}" title="Go to page {{.}}">{{.}}</a></li>        {{end}}        {{end}}        {{if lt .CurrentPage .TPM5}}        <li><span>...</span></li>        <li><a href="/adsreg/jobs?status={{.Status}}&page={{.TotalPage}}" title="Go to page {{.TotalPage}} ">{{.TotalPage}} </a>        </li>        {{end}}    </ul></div>

如此即实现了之前python分页相同的功能。