ajax 分页完全代码整理
/* 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 分页完全代码整理的更多相关文章
- 补充ajax分页的代码
1.主页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Ajax分页js代码
var pageIndex = 0; var pageSize = 10; $(function () { $("#btnSearch").click(function () { ...
- laraver ajax分页
,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 ); include($path); $content = ob_get_cle ...
- 原生ajax分页,无刷新分页,最简化。超简单,代码最少
<html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- 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 **** ...
随机推荐
- myeclipse8.6 for spring环境配置
- Spark2.0编译
Spark2.0编译 1 前言 Spark2.0正式版于今天正式发布,本文基于CDH5.0.2的Spark编译. 2 编译步骤 #2.1 下载源码 wget https://github.com/ap ...
- Qt Library 链接库
官方教程:http://wiki.qt.io/How_to_create_a_library_with_Qt_and_use_it_in_an_application http://qimo601.i ...
- vs2010中出现:程序管理器匹配不正确错误
http://bbs.csdn.net/topics/360074795 这是一篇csdn上的讨论帖,第15楼给出了正解
- 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决办法【转自wjr2012的csdn blog】
点击下载Genymotion-ARM-Translation.zip 将你的虚拟器运行起来,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你的虚拟机.
- LINQ to SQL和Entity Framework对比与关联 (转载)
LINQ to SQL和Entity Framework对比与关联 LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术.他们之间的本质区别在 ...
- C语言的本质(36)——makefile基础
除了Hello World这种极简单的程序之外,一般的程序都是由多个源文件编译链接而成的,这些源文件的处理步骤通常用Makefile来管理.makefile带来的好处就是--"自动化编译&q ...
- bzoj1643 [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪
Description 农夫约翰已经从他的牧场中取得了数不清块数的正方形草皮,草皮的边长总是整数(有时农夫约翰割草皮的刀法不合适,甚至切出了边长为0的正方形草皮),他已经把草皮放在了一个奶牛贝茜已经知 ...
- CentOS 6.5 CodeBlocks::wxWidgets安装与配置
第一步, #yum install codeblocks codeblocks-contrib codeblocks-devel 第二步,到官方下载源码包,我下的是wxX11的3.0版的. #tar ...
- 【转】基于V4L2的视频驱动开发
编写基于V4L2视频驱动主要涉及到以下几个知识点:1> 摄像头方面的知识 要了解选用的摄像头的特性,包括访问控制方法.各种参数的配置方法.信号输出类型等.2> Camera解码器.控制器 ...