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 **** ...
随机推荐
- POJ 2289 Jamie's Contact Groups (二分+最大流)
题目大意: 有n个人,可以分成m个组,现在给出你每个人可以去的组的编号,求分成的m组中人数最多的组最少可以有多少人. 算法讨论: 首先喷一下这题的输入,太恶心了. 然后说算法:最多的最少,二分的字眼. ...
- zoj3231 Apple Transportation(最大流)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Apple Transportation Time Limit: 1 Second ...
- Niagara AX连接MySQL数据库
步骤如下 1.安装Niagara AX (3.8.38): 2.安装MySQL(5.6.25):将MySQL\Connector.J 5.1\mysql-connector-java-5.1.35-b ...
- Qt模型/视图、委托
MVC视图和控制器对象相结合,其结果是模型/视图结构,仍然分离了数据与呈现给用户的方式,使得它可以在几个不同的视图中显示相同的数据,并实现新类型的视图而无需改变底层的数据结构.为了灵活的处理数据输入, ...
- 操作数据表中的记录——SELECT (where表达式、GROUP BY、HAVING、LIMIT)
原文链接:http://www.ifyao.com/2015/01/26/%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E8%A1%A8%E4%B8%AD%E7%9A%84 ...
- js的原型继承小结
考虑:有一个想要复用的对象,并且想要创建的第二个对象需要从第一个对对象中获取其功能. 实现如下: //要继承的对象 var parent = { name:"Papa" }; // ...
- jquery find()和filter()的区别
在写js查找当前标签下某一子元素的子元素集合时,用到了此方法 $(".flyout-trigger").mouseover(function(){ var maxnum=$(thi ...
- [XMPP]iOS聊天软件学习笔记[二]
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- USB CCID "复杂"命令拾零?
本文记录 USB CCID 标准中几个"复杂"的命令,复杂在于在这些命令身上花的时间较之简单的命令多许多或者是理解的时间比较晚,可能就是刚才.主要有以下几条:ccid_T0APDU ...
- Keil中Memory Model和Code Rom Size说明
C51中定义变量时如果省略存储器类型,Keil C51编译系统则会按编译模式SMALL.COMPACT和LARGE所规定的默认存储器类型去指定变量的存储区域,无论什么存储模式都可以声明变量在任何的80 ...