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 ...
随机推荐
- 09-cmake语法-add_dependencies()
在编译器的命令行上,为当前路径以及下层路径的源文件加入一些define flag.这个命令可以用来引入任何flag,但是它的原意是用来引入预处理器的定义.那些以-D或/D开头的.看起来像预处理器定义的 ...
- 实现js版StringBuilder
.net中StringBuilder的好处不多说了,下面是js版的StringBuilder var StringBuilder = (function () { function StringBui ...
- 【java异常】 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.emptech.db.demo.mapper.master.MOmQuotaTBMapper.findOmQuotaTB
<mapper namespace="com.emptech.db.demo.mapper.master.MOmQuotaTBMapper"> public inter ...
- contest5 CF991 div2 ooooxx ooooox ooooox
题意 div2D 给出一个棋盘, 有一些点不能放, 总共\(2\)排, 长度\(n(\le 100)\) 在上面空位摆放\('L'\)字形的牌, 问最多能放几个 例如: 00X00X0XXX0 0XX ...
- 关于nlp的一些探索
深度学习,知识图谱,nlp学习经历 获取信息来源:英文paper研读,吴恩达公开课,Hiton公开课,北大nlp教材,英文最新学术论文,中科院院士技术 ...
- cad.arx 自定义实体之编译第一个项目(甜头)
本篇不从零开始讲如何制造自定义图元,而是教新手们如何设置了环境之后编译张帆书中的代码. 利用vs2010编译 张帆<AutoCAD ObjectARX(VC)开发基础与实例教程>一书中的自 ...
- [转帖]Linux firewalld 防火墙使用
Linux firewalld 防火墙使用 2018-06-19 19:26:08 蚩尤后裔 阅读数 2101 收藏 更多 分类专栏: Linux 版权声明:本文为博主原创文章,遵循CC 4.0 ...
- Redis的LRU算法
Redis的LRU算法 LRU算法背后的的思想在计算机科学中无处不在,它与程序的"局部性原理"很相似.在生产环境中,虽然有Redis内存使用告警,但是了解一下Redis的缓存使用策 ...
- Effective.Java第67-77条(异常相关)
67. 明智审慎地进行优化 有三条优化的格言是每个人都应该知道的: (1)比起其他任何单一的原因(包括盲目的愚钝),很多计算上的过失都被归咎于效率(不一定能实现) (2)不要去计算效率上的一些小小的 ...
- Sitecore 8.2 工作流程
假设您的新Sitecore项目的所有开发都已完成.现在的下一步是在网站上填写内容并准备上线.客户通知您他们希望使用专门的网站管理员团队负责整个内容管理流程,并要求您为他们准备实例以便能够执行此操作. ...