Beego 学习笔记7：JS分页

JS分页

1> JS分页，业务逻辑

(1) 分页采用的是一个叫jquery.pagination.js的一个jquery插件

(2) 需要jquery的支持，此项目中使用到的是jquery-2.1.1.min.js

(3) 分页需要的参数有:记录总数，每页显示个数，页码

(4) 添加搜索的条件，作为查询使用

2> 编写新的model，命名为data.go.其代码如下:

package models 

import (

	"fmt"

	"github.com/astaxie/beego/orm"

	_ "github.com/go-sql-driver/mysql"

)

// 用户

type User struct{

	Id              int64    `orm:"auto"`

	Name            string   `orm:"size(100)"`

	Nickname        string   `orm:"size(100)"`

    Pwd             string   `orm:"size(100)"`

    Email           string   `orm:"size(100)"`

    Sex             string   `orm:"size(2)"`

	Roleid          string   `orm:"size(100)"`

	Status          int64

	Phone           string   `orm:"size(16)"`

}

//根据用户数据总个数

func GetRecordNum(search string) int64 {

	o := orm.NewOrm()

	qs := o.QueryTable("user")

	if search !=""{

		qs=qs.Filter("Name",search)

	}

	var us []User

	num, err :=  qs.All(&us)

	if err == nil {

		return num

	}else{

		return 0

	}

}

func SearchDataList(pagesize,pageno int,search string) (users []User) {

	o := orm.NewOrm()

	qs := o.QueryTable("user")

	if search !=""{

		qs=qs.Filter("Name",search)

	}

	var us []User

	cnt, err :=  qs.Limit(pagesize, (pageno-1)*pagesize).All(&us)

	if err == nil {

		fmt.Println("count", cnt)

	}

	return us

}

//初始化模型

func init() {

	// 需要在init中注册定义的model

	orm.RegisterModel(new(User))

}

3> 控制器user.go,其代码如下:

package controllers

import (

	"secondweb/models"

	"fmt"

	"github.com/astaxie/beego"

)

type UserController struct {

	beego.Controller

}

func (c *UserController) Get() {

	c.TplName = "list.html"

}

func (c *UserController) Post() {

	pageno,err:=c.GetInt("pageno")

	if err!=nil{

       fmt.Println(err)

	}

	search:=c.GetString("search")

	userList:=models.SearchDataList(3,pageno,search)

	listnum:=models.GetRecordNum(search)

	c.Data["json"]=map[string]interface{}{"Count":listnum,"PageSize":3,"Page":pageno,"DataList":userList};

	c.ServeJSON();

}

type YonghuController struct {

	beego.Controller

}

func (c *YonghuController) Post() {

	pageno,err:=c.GetInt("pageno")

	if err!=nil{

       fmt.Println(err)

	}

	search:=c.GetString("search")

	userList:=models.SearchDataList(3,pageno,search)

	listnum:=models.GetRecordNum(search)

	c.Data["json"]=map[string]interface{}{"Count":listnum,"PageSize":3,"Page":pageno,"DataList":userList};

	c.ServeJSON();

}

4> 路由配置如下：

package routers

import (

	"secondweb/controllers"

	"github.com/astaxie/beego"

)

func init() {

	beego.Router("/", &controllers.MainController{})

	beego.Router("/Home/PageData", &controllers.UserController{})

	beego.Router("/Home/PageNextData", &controllers.YonghuController{})

}

5> 新建一个list.html,其代码如下:

<!DOCTYPE html>

 

<html>

      <head>

        <title>首页 - 用户列表页面</title>

        <link rel="shortcut icon" href="/static/img/favicon.png" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style>

          .am-cf{

            height: 50px;

            margin-top: 30px;

            line-height: 50px;

            text-align: center;

            vertical-align: middle;

            margin-left: 40%;

          }

          .am-fr{

              float: left;

              line-height: 50px;

              text-align: center;

              vertical-align: middle;

              height: 50px;

              margin-top: -15px;

          }

          .am-pagination{

            list-style:none;

            height: 50px;

            line-height: 50px;

            text-align: center;

            vertical-align: middle;

          }

          .am-pagination li{

            float:left;

            margin-left: 10px;

          }

          .am-pagination li a{

            text-decoration:none;

          }

          .am-jl{

              float: left;

              margin-left: 20px;

          }

          .am-active{

              color: #f00;

          }

        </style>

      </head>

    

    <body>

     

        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">

          <input type="text" placeholder="请输入名称" id="txt_search"/>

          <button class="" onclick="search()">搜索</button>

        </div>

        <table class="table table-striped table-hover table-bordered ">

          <thead>

           <th style="text-align: center">ID</th>

           <th style="text-align: center">名称</th>

           <th style="text-align: center">昵称</th>

           <th style="text-align: center">密码</th>

           <th style="text-align: center">Email</th>

           <th style="text-align: center">性别</th>

           <th style="text-align: center">手机号</th>

         </thead>

         <tbody id="sortable">

         </tbody>

        </table> <!--分页部分-->

        <div style="margin: 20px 0px 10px 0;">

         <table style="margin: 0 auto;">

             <tr>

                 <td>

                     <div id="pagination" class="pagination"></div>

                 </td>

             </tr>

         </table>

        </div>

        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 

        <script type="text/javascript" src="/static/js/jquery.paginationNew.js"></script>     

        <script type="text/javascript">

            //页面的初始化

            $(function () {

              //分页数据

              InitData();

            })

            function search(){

                var search = $("#txt_search").val();//名称

                InitData();

            }

            //使用分页插件pagination分页显示1

        function InitData() {

            var search = $("#txt_search").val();//名称

            $.ajax({

                async: false,

                type: "post",

                url: "/Home/PageData",

                data: {

                    search: search,

                    pageno:0

                },

                success: function (data) {

                    console.log('首页数据')

                    console.log(data)

                    var Count = data.Count

                    var PageSize = data.PageSize;

                    var Page =data.Page;

                    $("#pagination").pagination(Count, {

                        callback: pageselectCallback,

                        num_edge_entries: 1,

                        prev_text: "上一页",

                        prev_show_always: true,

                        next_text: "下一页",

                        next_show_always: true,

                        items_per_page: PageSize,

                        current_page: Page,

                        link_to: '#__aurl=!/Home/PageData',

                        num_display_entries: 4

                    });

                }

            });

        }

        //使用分页插件分页后的回调函数2

        function pageselectCallback(page_id, jq) {

            var search = $("#txt_search").val();//名称

            $.ajax({

                async: false,

                type: "post",

                url: "/Home/PageNextData",

                data: {

                    search: search,

                    pageno: (parseInt(page_id) + parseInt(1)),

                },

                success: function (data) {

                    console.log('下一页的数据')

                    console.log(data)

                    console.log(data.DataList)

                    htmlData(data.DataList)

                }

            });

        }

        function htmlData(data){

             var html='';

             for(var i=0;i<data.length;i++){

                html+='<tr class="sort-item"  id="module_'+data[i].Id+'" value="'+data[i].Id+'">';

                html+='   <td style="text-align: center;width: 150px;"><span class="label label-default" >'+data[i].Id+'</span></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Name+'</strong></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Nickname+'</strong></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Pwd+'</strong></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Email+'</strong></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Sex+'</strong></td>';

                html+='   <td style="text-align: center;width: 240px;" ><strong>'+data[i].Phone+'</strong></td>';

                html+='</tr>';

             }

             $("#sortable").html(html);

        }

        </script>

    </body>

</html>

6> Main.go的代码如下:

package main

import (

	"fmt"

	"github.com/astaxie/beego/orm"

	_ "secondweb/routers"

	"github.com/astaxie/beego"

)

func init(){

	dbhost := beego.AppConfig.String("dbhost")

    dbport := beego.AppConfig.String("dbport")

    dbuser := beego.AppConfig.String("dbuser")

    dbpassword := beego.AppConfig.String("dbpassword")

    db := beego.AppConfig.String("db")

    //注册mysql Driver

    orm.RegisterDriver("mysql", orm.DRMySQL)

	//构造conn连接

	//用户名:密码@tcp(url地址)/数据库

    conn := dbuser + ":" + dbpassword + "@tcp(" + dbhost + ":" + dbport + ")/" + db + "?charset=utf8"

    //注册数据库连接

    orm.RegisterDataBase("default", "mysql", conn)

    fmt.Printf("数据库连接成功！%s\n", conn)

}

func main() {

    o := orm.NewOrm()

    o.Using("default") // 默认使用 default，你可以指定为其他数据库

	beego.Run()

}

7> App.conf配置文件如下:

appname = secondweb

httpport = 9080

runmode = dev

dbhost=192.168.1.87

dbport=3306

dbuser=root

dbpassword=123456

db=test

tablename=user

8> 运行起来的效果如下:

9> 下一章节，讲sql语句

Beego 学习笔记7：JS分页的更多相关文章

Beego 学习笔记14：Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
Beego学习笔记——开始
beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...
Beego 学习笔记15：布局页面
页面布局 1> 一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2> ...
Beego学习笔记——Logs
日志处理这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...
Beego学习笔记——Config
配置文件解析这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...
Beego学习笔记
Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...
Beego学习笔记6:分页的实现
实现分页的效果 1> 分页的实现的业务逻辑 1->每个页面显示N条数据,总的数据记录数M,则分页的个数为M%N==0?M/N:M/N+1; 2->页面渲染分页的html部分 ...
Beego学习笔记5:MVC-VC
MVC-VC 1> 新建一个user.go控制器,其代码如下: package controllers import ( "webapp/models" " ...
MyBatis-Plus学习笔记(3)：分页查询
依赖配置可参考:MyBatis-Plus学习笔记(1):环境搭建以及基本的CRUD操作分页配置 @Configuration public class PlusConfig { @Bean publ ...

随机推荐

【大数据】0002---MongoDB集群自动分离创建新集群
场景:MongoDB集群运行后,自动产生新的集群解答:可能没有理解问题,理清思路如下 1.日志分析 2.配置文件检查(日期.版本) 3.网络IP变化 4.github 5.stack overflo ...
接口测试中，数据驱动时，参数各类型，空或None的处理
天天说接口测试,天天说数据驱动,但网上的各种教程太烂,遇到实际情况就傻眼了. 来来来,我们看一个例子假设,有下面这样一个接口,获取用户信息,可以带的参数如下: 用户名(uname) str(),非必 ...
1.Java介绍
第一章走进Java 一.Java技术体系 Java技术体系组成部分:Java程序设计语言.Java虚拟机.Class文件格式.Java API类库 JDK:Java程序设计语言 + Java虚拟机 ...
Python面向对象 | 抽象类和接口类
一.抽象类(规范的编程模式) 什么是抽象类抽象类是一个特殊的类,它的特殊之处在于只能被继承,不能被实例化.抽象类的本质还是类,指的是一组类的相似性,而接口只强调函数属性的相似性. 为什么要有抽象类 ...
[RN] React Native Image 实现placeholder占位图
React Native Image 实现placeholder占位图 react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为: 使用Im ...
redis实现mysql的数据缓存
环境设定base2 172.25.78.12 nginx+phpbase3 172.25.78.13 redis端base4 172.25.78.14 mysql端# 1.在base2(nginx+p ...
识别led灯和驱动器的关联关系
精准答案: https://wenku.baidu.com/view/db1f7361ac02de80d4d8d15abe23482fb4da02d6.html?qq-pf-to=pcqq.group ...
【Gamma】测试报告
测试方法及过程在正式发布前,我们对后端代码.前后端接口.服务器以及前端的页面和功能做了多种测试,主要包括对后端代码的单元测试.针对接口的测试.压力测试以及功能测试. 后端代码单元测试该部分测试主要 ...
如何使用 Django中的 get_queryset, get_context_data和 get_object 等方法
原文: https://blog.csdn.net/HH2030/article/details/80994274
收藏：C语言中字符串常量到底存在哪了？
来源:https://www.cnblogs.com/jaysir/p/5041799.html 常量存储总结局部变量.静态局部变量.全局变量.全局静态变量.字符串常量以及动态申请的内存区 1.局部变 ...

Beego 学习笔记7：JS分页

Beego 学习笔记7：JS分页的更多相关文章

随机推荐

热门专题