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实现分页的更多相关文章

  1. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  2. 利用Linq + Jquery + Ajax 异步分页的实现

    在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...

  3. jQuery ajax 实现分页 kkpager插件

    代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href=&qu ...

  4. PHP中使用jQuery+Ajax实现分页查询多功能操作

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  5. jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创

    简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...

  6. PHP+jquery+ajax实现分页

    HTML <div id="list"> <ul></ul> </div> <div id="pagecount&q ...

  7. 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 **** ...

  8. 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  9. jquery+ajax分页

    先看效果图:

随机推荐

  1. ref的用法

    ref可以修改变量作为参数调用的值,但必须要初始化,不能在调用的函数中初始化 static void Main(string[] args) { ; Console.WriteLine("m ...

  2. 数据结构之平衡二叉树(AVL树)

    平衡二叉树(AVL树)定义如下:平衡二叉树或者是一棵空树,或者是具有以下性质的二叉排序树: (1)它的左子树和右子树的高度之差绝对值不超过1: (2)它的左子树和右子树都是平衡二叉树. AVL树避免了 ...

  3. CodeForces 519B A and B and Compilation Errors

    B. A and B and Compilation Errors time limit per test 2 seconds memory limit per test 256 megabytes ...

  4. SRM 618 DIV1 500

    非常棒的组合问题,看了好一会,无想法.... 有很多做法,我发现不考虑顺序的最好理解,也最好写. 结果一定是两种形式 A....A   dp[n-1] A...A...A sgma(dp[j]*dp[ ...

  5. 用 Graphviz+pvtrace 可视化函数调用

    最近在想怎么把一个程序的函数调用关系快速的用流程图的方式画出来,之后看到了这个一篇文章“用 Graphviz 可视化函数调用”(http://www.ibm.com/developerworks/cn ...

  6. [DEMO] 互联网广告RTB机制简介

    前言: 传统的互联网广告一般都是大流量网站在页面中留出一定空位,某些推广商家通过买位的方式来展示自己的广告. 我们这里引入一个案例:假设大访问量网站为博客园,想要广告推广的公司为阿里云平台. (场景为 ...

  7. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  8. php实现网页trace方法

    // 记录内存初始使用和开始时间,在系统的入口记录 $beginTime= microtime(TRUE); $start_memory = memory_get_usage(); //die; ec ...

  9. mvc学习(二)

    1.后台foreach 与 html的关系 <table border="1">@for (var i = 0; i < 10; i++){@Html.Raw(i ...

  10. MVC代码中如何调用api接口

    关于代码解释,为了方便读者浏览时更好理解代码的含义,我把注释都写在代码里面了.因为一开始我只考虑到功能上的实现并没有考虑代码的优化所以代码我就全写在一个页面了.至于那些生成扑克牌类.计算类等代码优化方 ...