/* ajax分页 */
var page_cur = 1; //当前页
var total_num, page_size, page_total_num;//总记录数,每页条数,总页数
function getData(page) { //获取当前页数据
$.ajax({
type: 'GET',
url: 处理数据地址,
data: {
'page': page,
'catid': '{$video_info.catid}'
},
dataType: 'json',
success: function(json) {
$("#ul_lists").empty();
total_num = json.total_num; //总记录数
page_size = json.page_size; //每页数量
page_cur = page; //当前页
page_total_num = json.page_total_num; //总页数
var li = "";
var list = json.list;
$.each(list,
function(index, array) { //遍历返回json
var curid = {$video_info.id};
var cur = curid == array['id'] ? "class='cur'" : "";
li += "<li "+cur+"><a href='地址/id/"+array['id']+"'>" + array['title'] + "</a><span>"+array['time']+"</span></li>";
});
$("#ul_lists").append(li);
},
complete: function() {
getPageBar(); //js生成分页,可用程序代替
},
error: function() {
alert("数据异常,请检查是否json格式");
}
});
}
function getPageBar() { //js生成分页
if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数
if (page_cur < 1) page_cur = 1; //当前页小于1
page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>";
if(page_total_num > 1){
if (page_cur == 1) { //若是第一页
page_str += "<span>首页</span><span>上一页</span>";
} else {
page_str += "<span><a href='javascript:void(0)' data-page='1'>首页</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>";
}
if (page_cur >= page_total_num) { //若是最后页
page_str += "<span>下一页</span><span>尾页</span>";
} else {
page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>";
}
}
$("#page").html(page_str);
}
$(function() {
getData(1);//默认第一页
$("#page a").live('click', function() { //live 向未来的元素添加事件处理器,不可用bind
var page = $(this).attr("data-page");//获取当前页
getData(page)
});
});

数据处理端就正常的接收参数查询数据然后返回json前台处理

ajax 分页完全代码整理的更多相关文章

  1. 补充ajax分页的代码

    1.主页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. Ajax分页js代码

    var pageIndex = 0; var pageSize = 10; $(function () { $("#btnSearch").click(function () { ...

  3. laraver ajax分页

    ,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 );         include($path);         $content = ob_get_cle ...

  4. 原生ajax分页,无刷新分页,最简化。超简单,代码最少

    <html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...

  5. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  6. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  7. yii2的分页和ajax分页

    要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...

  8. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

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

随机推荐

  1. SQL中的delete和TRUNCATE的用法

    TRUNCATE TABLE 表名 删除表中的所有行,而不记录单个行删除操作. 语法 TRUNCATE TABLE name 参数 name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TR ...

  2. 【转载】iOS 设置Launch Image 启动图片(适用iOS9)

    Step1 1.点击Image.xcassets 进入图片管理,然后右击,弹出"New Launch Image" 2.如图,右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以 ...

  3. MVC(Model View Controller)框架

    MVC框架 同义词 MVC一般指MVC框架 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一 ...

  4. Js中单引号和双引号的区别

    <html> <body> <input value="外双引号内双引号-错误" type="button" onclick=&q ...

  5. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  6. UML中九种图的理解

    1.用例图. 用例图是用来描述用户需求的,从用户的角度来描述系统的功能,并指出各个执行者.强调谁在使用,系统的执行者是谁. 2.类图. 用来定义系统中的类,包括描述类的结构和类之间的关系.类图的主要作 ...

  7. php 程序员的历程

    今天一朋友该找工作了. 问了我好多 我整理了下  希望有些帮助 以下内容纯属个人感觉如果有不恰当的地方请忽略.... 我做的是项目的包工 就是把销售拿下的项目整合后给我们实现功能. --------- ...

  8. Blog透视镜

    Blog透视镜,提供了Blog代码示例,文章和教程,可以帮助你建置博客. 网站名称:Blog透视镜 网站地址:http://blog.openyu.org

  9. 对Qt for Android的评价(很全面,基本已经没有问题了,网易战网客户端就是Qt quick写的),可以重用QT积累20年的RTL是好事,QML效率是HTML5的5倍

    现在Qt不要光看跨平台了,Qt也有能力和原生应用进行较量的.可以直接去Qt官网查看他和那些厂商合作.关于和Java的比较,框架和Java进行比较似乎不且实际.如果是C++和Java比较,网上有很多文章 ...

  10. Qt中一些常用的格式转换

    转自:http://blog.csdn.NET/yh_1988/article/details/7190356 用Qt经常头痛于一些格式不能通用的问题 在此记录备用 1 (20120112)QStri ...