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 - 5
jobPage := 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分页相同的功能。