beego模版处理分页

beego模版如何处理分页

最近捣鼓了一阵go，并利用beego开发了一个小东西，过程需要用到分页，看了官方文档，需要安装下载扩展来实现（果断放弃），最后还是利用layui框架配合实现分页，这篇教程将向大家分享实现。

一、到layui官网下载分页需要相关js跟css。

二、beego模型代码实现：

/**
后端获取列表【带分页】
 */
func PageAdminUserWithAdmin(page, pageSize int) ([]AdminUser, int64) {
   var list []AdminUser
   var adminUser AdminUser
   offset := (page - 1) * pageSize
   o := orm.NewOrm()
   qs := o.QueryTable(adminUser)
   total, _ := qs.Count()
   qs.OrderBy("id").Limit(pageSize, offset).All(&list)
   return list, total
}

三、控制器代码，我们必须返回总数据以及每页返回条数据给前端页面，这也是分页必须用到的

func (c *AdminUserController) AdminUserList() {
   //每页默认数量
   PageLimit := 10
   //获取列表数据
   page, err := c.GetInt("page") //获取页码
   if err != nil {
      page = 1
   }
   limit, err := c.GetInt("limit") //获取每页条数
   if err != nil {
      limit = PageLimit
   }
   result, count := models.PageAdminUserWithAdmin(page, limit)
   //重组友情链接数组
   adminList := make([]map[string]interface{}, len(result))
   for k, v := range result {
      row := make(map[string]interface{})
      //重新赋值数组
      row["Id"] = v.Id
      row["Username"] = v.Username
      row["Status"] = int64(v.Status)
      adminList[k] = row
   }
   //组合返回数据
   c.Data["Admin"] = adminList     //返回的列表数组
   c.Data["PageCount"] = count     //获取的数据总条数
   c.Data["PagePage"] = page       //获取的页码
   c.Data["PageLimit"] = PageLimit //每页数量
   //页面返回
   c.Layout = "admin/layouts/layout.tpl"
   c.TplName = "admin/user/index.tpl"
}

四、前端页面代码

我们必须给一个div命名一个id为page，这个id不能改动，必须为这个名称

<!-- 分页 -->
<div class="layui-row" id="page" style="text-align: center;"></div>
<!-- 分页 -->

然后是js代码，其中总条数跟每页多少条数以及当前页码数都是通过后端控制器返回，如下：

layui.use('laypage', function () {
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page' //注意，这里的 page 是 ID，不用加 # 号
        , count: {{.PageCount}}    //获取数据总条数
        , limit: {{.PageLimit}}    //每页限制多少条
        , curr:{{.PagePage}}       //当前页码
        , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if (!first) {
                window.location.href = "/adminUserList?page=" + obj.curr
            }
        }
    });
});

最后是效果图，如下：

WX20201230-220958@2x.png