前端
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="stilearning" />
<link href="/static/home/css/css.css" rel="stylesheet">
<script src="/static/js/jquery.min.1.11.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background:#f5f5f5;">
<header class="i_header">测试</header>
<div class="arc">
<div class="arc_ul" id="list"></div>
<div class="loading"><a href="javascript:void(0)" data-page="1" id="loading">加载更多</a></div>
</div>
<footer class="i_footer">版权所有</footer>
<script>
//ajax分页插件
(function($){
$.fn.paging = function(options){
var ops = $.extend(true,$.fn.paging.defaults, options);
ops.mythis = this;
//分页数据函数，得到数据并显示
var getData = function(page,size){
var data =$.extend({},ops.data, {page:page,size:size});
$.ajax({
type:ops.type,
url:ops.url,
data:data,
dataType:ops.dataType,
beforeSend: ops.beforeSend,
success: function(json){
$("#lding").remove();
ops.list(json);
getPageBar(json);
ops.mythis.attr("data-page",ops.page+1);
}
});
}
getData(1,ops.size);
//*loading条显示
var getPageBar = function(json){
var total = json.data;//总条数
if(!json.data.length){
ops.status=2;
$("#loading").text("已全部加载完成");
return ;
}
}
//点击分页跳转
ops.mythis.on(‘click‘, function(event) {
ops.page = parseInt($(this).attr("data-page"));
if(ops.page && ops.status!=2){getData(ops.page,ops.size);}
});
return this;
};
$.fn.paging.defaults = {
page:1,//开始的页数
size:10,//每页显示数
mythis:{},//当前的分页对象
data:{},//发向后台的额外数据
status:1,//加载的状态，2为全部加载完成，1为未加载完
list:function(){},//列表
fpage:function(){},//显示分页
url:"/",//ajax请求地址
type:"GET",//发送方式
dataType:"json",//默认的
beforeSend: function(){$("#list").append(‘<li id="lding">loading……</li>‘);},
}
})(jQuery);
$(function(){
$.extend(true,$.fn.paging.defaults,{
size:10,//每页显示数
list:function(json){
var html="";
var list = json.data;
$.each(list,function(k,v){
html += ‘<div class="arc_list"><div class="pic"><a href="/admin/index/diaocha?id=‘+v.id+‘"><img src="/static/home/images/ico‘+v.ico+‘.png"></a></div><h3>‘+v.name+‘</h3></div>‘;
});
$("#list").append(html);
},//列表
url:"/admin/index/list",//后台地址
});
$("#loading").paging();
});
</script>
</body>
</html>
后台
//@router /index/list [get]
func (this *IndexController) List() {
page, _ := this.GetInt64("page")
size, _ := this.GetInt64("size")
if page == 0 || size == 0 {
this.AjaxReturn(0, "参数错误", 0)
return
}
start := (page - 1) * size
count, _ := models.M("diaochalist").Field("count(id) as count").Count()
data, err := models.M("diaochalist").Order("id desc").Limit(start, size).Select()
fmt.Println(models.Get_sql_string())
if err != nil {
this.AjaxReturn(0, "查询失败："+err.Error(), 0)
return
}
this.AjaxReturn(int(count), "ok", data)
}
（我使用的是golang，其他语言也可以只要返回的是格式对就行）
时间： 2024-11-09 04:14:17