jquery+ajax实现分页
var curPage = 1; //当前页码
var total,pageSize,totalPage; //总记录数,每页显示数,总页数
getData(1);
$("#pagecount").on('click','span a',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
function getData(page){
$.ajax({
url:ThinkPHP['MODULE']+'/Votesubject/getVotesubjectList',
type:'POST',
data: {'pageNum':page-1},
beforeSend:function(){ },
success:function(json){
// console.log(json);
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var ul=$('.theme_body').find('*').remove();
string='';
$.each(json.list,function(index,array){ //遍历json数据列
string+=''; });
$('.theme_body').append(string); },
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
}
//获取分页条
function getPageBar(){
$("#pagecount").find('*').remove();
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>"; //如果是第一页
if(curPage==1){
pageStr += "<span>首页</span><span>上一页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
} //如果是最后页
if(curPage>=totalPage){
pageStr += "<span>下一页</span><span>尾页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
}
$("#pagecount").append(pageStr);
}
css样式
<style>
.pagecount{
text-align: center;
margin-bottom: 5px;
padding:15px 15px 20px 0;
}
.pagecount span{
display: inline-block;
background: #ddd;
margin:0 0 0 5px;
width:40px;
text-align: center;
padding:2px 8px 2px 8px;
border:1px solid #eee;
color: #666;
}
.pagecount span a{
color:#333;
}
.pagecount span a:hover{
text-decoration: underline;
} </style>
html前端
<ul class="theme_body"></div><div id="pagecount"class="pagecount"></div>
后台数据处理
public function getVotesubjectList(){
if(IS_AJAX){
$page=I('post.pageNum');//当前页
$Votesubject=D('Votesubject');
$total =$Votesubject->count();//总记录数
$pageSize = ; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数
$startPage = $page*$pageSize; //开始记录 $limit="$startPage,$pageSize";
//构造数组
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$list=$Votesubject->getList($limit);
$arr['list']=$list;
$this->ajaxReturn($arr); }
else{ }
}
说明:后台我用的是thinkphp框架
jquery+ajax实现分页的更多相关文章
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- 利用Linq + Jquery + Ajax 异步分页的实现
在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...
- jQuery ajax 实现分页 kkpager插件
代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href=&qu ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创
简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...
- PHP+jquery+ajax实现分页
HTML <div id="list"> <ul></ul> </div> <div id="pagecount&q ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- jquery+ajax分页
先看效果图:
随机推荐
- [leetcode] 题型整理之字符串处理
71. Simplify Path Given an absolute path for a file (Unix-style), simplify it. For example,path = &q ...
- 桶装水 送水 消费充值PDA会员管理系统 介绍
桶装水 送水 消费充值PDA会员管理系统 介绍 主要功能:会员管理临时开卡.新增会员.修改会员.删除会员场馆管理仓管信息管理.租凭信息管理会员卡管理会员卡类型设置.会员发卡.会员信息管理.体验用户发卡 ...
- js实现找质因数
实现最一个整数的质因数的拆分,例如:90可以才分为2*3*3*5,具体代码如下: <script> var num = prompt('请输入一个整数:','90'); var regex ...
- dedecms在首页或列表调取文章内容body的三个方法
有时需要在网站首页或栏目封面上显示几篇文章的内页作为导语或其他什么的,但acrlist标签是不能直接调取body的,这时我们就需要使用以下方法来调取body. 方法一:arcticle 标签 加上ch ...
- 【改】iOS学习之NSAttributedString(富文本)
NSAttributedString 叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化,一般都是对可变富文本(N ...
- WSDL项目----操作和请求
至于现在你只看服务相关的特性,让我们尝试更多的操作和相应的请求. 操作 每个基于WSDL服务公开的操作包括一个请求和响应消息格式(可选). soapUI服务中的动作显示为节点在项目导航器的服务下 在s ...
- BZOJ4643 : 卡常大水题
将边按权值$A$从小到大排序,从小到大枚举$\max(A)$,然后双指针从大到小枚举$\max(B)$. 按权值$B$用大根堆维护所有已经加入的边,每次$\max(B)$减少时,不断取出权值$B$最大 ...
- CentOS6.7安装Python3.4
1.下载Python3.4安装包 wget https://www.python.org/ftp/python/3.4.4/Python-3.4.4.tgz 2.解压.编译.安装 .tgz cd Py ...
- 最小生成树のprim算法
Problem A Time Limit : 1000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Sub ...
- 20145215实验二 Java面向对象程序设计
一.实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 二.实验步骤 (一)单元测试 (1)三种代码 伪代码: ...