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 **** ...
随机推荐
- iPad学做菜
项目描述:家常菜.川菜 .鲁菜.东北菜.甜品等各大菜系应有尽有,详细的制作步骤,再也不用为自己不会做饭而烦恼. 主要技术:主界面采用UISplitViewController的结构设计:自定义各大菜系 ...
- web验证码
前台引用.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="YanZh ...
- pp to write
vanishing gradient problem multi-dimensional lstm
- Ext JS中Button的一般使用
Ext JS中Button按钮的显示,以及按钮的部分事件 一.属性 renderTo:将当前对象所生成的HTML对象存放在指定的对象中 text:得到按钮名称 minWidth:按钮最小宽度 hidd ...
- 单机/伪分布式Hadoop2.4.1安装文档
转载自官方文档,最新版请见:http://hadoop.apache.org/docs/r2.4.1/hadoop-project-dist/hadoop-common/SingleCluster.h ...
- Android Studio Linking an external C++ project 时候 报Invalid file name. Expected: CMakeLists.txt
Android Studio 右键Linking an external C++ project 时候 报Invalid file name. Expected: CMakeLists.txt错误 查 ...
- 2016届百度实习生前端笔试题上海卷a
1.写出javascript运行结果:alert(‘5’+5); 结果:alert()函数中不能进行算术运算或字符串拼接,故不会弹出对话框. 2.写出javascript运行结果:for(var ...
- 异常处理与调试3 - 零基础入门学习Delphi52
异常处理与调试3 让编程改变世界 Change the world by program 两种结构的嵌套 要在一个过程里同时实现处理异常和保护资源分配,关键要保证"try-except&qu ...
- 使用DBUtils小框架
DBUtils对sqlserver好像支持不怎么好,经常出现问题 比如 三月 14, 2015 10:19:32 上午 com.mchange.v2.log.MLog 信息: MLog clients ...
- Network Saboteur(搜索)
Network Saboteur POJ2531 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10351 Accept ...