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 ...
随机推荐
- flask实战-个人博客-视图函数
视图函数 在上面我们创建了所有必须的模型类.模板文件和表单类.经过程序规划和设计后,我们可以创建大部分视图函数.这些视图函数暂时没有实现具体功能,仅渲染对应的模板,或是重定向到其他视图.以blog蓝本 ...
- Android 获取联系人的号码的类型描述
...... int index = phonesCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER); int t ...
- 使用Git管理品优购项目 开始部分
- pycharm调整选中的变量的颜色
- ant design pro如何实现分步表单时，返回上一步值依然被保存
首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...
- ESP8266 LUA脚本语言开发: 准备工作-动手编译LUA固件
前言 这节咱自己编译LUA固件 准备一台linux的机子 我把固件放到了git上,方便电脑用http下载 我先用这个连接linux 大家随意哈,只要是一台linux的机子就可以,不管是图形页面还是命令 ...
- python paramiko与linux的连接
两种使用paramiko连接到linux服务器的代码 方式一: 1 ssh = paramiko.SSHClient() 2 ssh.set_missing_host_key_policy(param ...
- 最短路径 | 1003 dfs 或 dij ，单源最短路径条数与经过的点权最大
这题很早之前就遇到过,是pat留给我的第一印象,然而昨天却有点写不出来.今天dfs用了10分钟不到写出来了.dij用了大约15分钟,捉虫花了一点时间. dfs: 注意剪枝的时候别剪错就行了. #inc ...
- LOJ2687 BOI2013Vim 题解
题目链接 这里只写个摘要,具体的可以看 神仙Itst的博客 大概是每相邻两个位置之间的线段要么被覆盖一次,要么被覆盖三次,然后DP,如下图: 代码: #include<bits/stdc++.h ...
- SDN实验2
第二次sdn实验: 1. 利用mininet创建如下拓扑,要求拓扑支持OpenFlow 1.3协议,主机名.交换机名以及端口对应正确,请给出拓扑Mininet执行结果,展示端口连接情况. 本次使用py ...