<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax分页</title>
</head>

<body>
<style>
.pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: right;}
.pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {
height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}
.pagination input {border-width: 1px;}
.page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}
.pagination a {text-decoration: none;}
.page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}
.page-disabled {color: #CCCCCC;}
.page-skip {color: #666666;padding: 0 3px;}
</style>
<div id="pageNav">
</div>
<script>
testPage(1);
function testPage(curPage){
supage('pageNav','testPage','',curPage,100,5);
}

/**

* @param {String} divName 分页导航渲染到的dom对象ID
* @param {String} funName 点击页码需要执行后台查询数据的JS函数
* @param {Object} params 后台查询数据函数的参数，参数顺序就是该对象的顺序，当前页面一定要设置在里面的
* @param {String} total 后台返回的总记录数
* @param {Boolean} pageSize 每页显示的记录数，默认是10
*/
function supage(divId, funName, params, curPage, total, pageSize){
var output = '<div class="pagination">';
var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;
if(parseInt(total) == 0 || parseInt(total) == 'NaN') return;
var totalPage = Math.ceil(total/pageSize);
var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;

//从参数对象中解析出来各个参数
var param_str = '';
if(typeof params == 'object'){
for(o in params){
if(typeof params[o] == 'string'){
param_str += '\'' + params[o] + '\',';
}
else{
param_str += params[o] + ',';
}
}
//alert(111);
}
//设置起始页码
if (totalPage > 10) {
if ((curPage - 5) > 0 && curPage < totalPage - 5) {
var start = curPage - 5;
var end = curPage + 5;
}
else if (curPage >= (totalPage - 5)) {
var start = totalPage - 10;
var end = totalPage;
}
else {
var start = 1;
var end = 10;
}
}
else {
var start = 1;
var end = totalPage;
}

//首页控制
if(curPage>1){
output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一页" class="page-first">«</a>';
}
else
{
output += '<span class="page-disabled">«</span> ';
}
//上一页菜单控制
if(curPage>1){
output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一页" class="page-previous">‹</a>';
}
else{
output += '<span class="page-disabled">‹</span>';
}

//页码展示
for (i = start; i <= end; i++) {
if (i == curPage) {
output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';
}
else {
output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';
}
}
//下一页菜单控制
if(totalPage>1 && curPage<totalPage){
output += '<a title="下一页" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';
}
else{
output += '<span class="page-disabled">›</span>';
}
//尾页控制
if(curPage<totalPage){
output += '<a title="尾页" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';
}
else{
output += '<span class="page-disabled">»</span>';
}

output += '</div>';
//渲染到dom中
document.getElementById(divId).innerHTML = output;
};
</script>

</body>

</html>

ajax分页效果实现的更多相关文章

  1. ajax分页效果、分类联动、搜索功能

    一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...

  2. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  3. ajax实现无刷新分页效果

    基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

  4. 利用ajax实现分页效果

    在网页中看到的分页效果,想一下就点击分页中的内容的时候,然后调用ajax调出对应的数据,正确的显示在相应的标签内. 1.用html实现正确的样式和结构 2.采用jquery中的ajax调出数据. 需要 ...

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

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

  6. yii2的分页和ajax分页

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

  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.3.mi ...

  8. php--yii框架中的ajax分页与yii框架自带的分页

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

  9. [转]jQuery Pagination Ajax分页插件中文详解

    在做项目时需要用到在前端页面中需要实现分页显示的功能,类似于博客园下面的分页导航.从网上找了几个,觉得下面这个使用起来非常简单,也很方便.特在这里记录一下. 以下为文章原文. 中文项目地址:http: ...

随机推荐

  1. C语言之指针与数组总结

    和指针相关的问题口诀1: 1. 地址变量得地址,得谁地址指向谁 和指针相关的问题要画图: 内容变量画房子,指针画箭头 ---->口 ------------------------------- ...

  2. PHP -- four arithmetic operation

    PHP 生成 简单四则运算. Thanks for Open Source. 本代码基于 jiaych php四则运算计算函数实现. <?php /*基于jiaych php四则运算计算函数 h ...

  3. 关于 VS2012 创建 MVC4 Empty 项目的一个小问题

    今天下午发现一个新建的项目工作异常,主要表现为应该返回JSON的Action没有返回JSON字符串,而是返回了JsonResult的对象名,即字符串“System.Web.Mvc.JsonResult ...

  4. python 基础——*args和**kwargs

    *args表示任何多个无名参数,它是一个tuple:**kwargs表示关键字参数,它是一个dict. def func(one, *args, **kwargs): print type(one) ...

  5. ruby 疑难点之—— yield 和 yield self

    yield 所有的"方法(methods)"隐式跟上一个"块(block)"参数. 块参数也可以明确给定,形式就是在参数前面加一个"&&quo ...

  6. HDU 1016 Prime Ring Problem (DFS)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  7. [改善Java代码]使用构造函数协助描述枚举项

    一.分析 一般来说,我们经常使用的枚举项只有一个属性,即排序号,其默认值是从0.1.2... ....但是除了排序号外,枚举还有一个(或多个)属性:枚举描述,它的含义是通过枚举的构造函数,声明每个枚举 ...

  8. 移动端开发的meta标签作用

    一.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  9. Bootstrap ACE后台管理界面模板-jquery已整理

    做后台通用模板,基于bootstrap,jquery写成的模板,非常齐全．国内不能正常访问google我将不能访问的jquery替换成cdn.bootcss.com网站下的jquery 链接: htt ...

  10. JMS - 消息确认

    消息确认机制 消息确认协议是保证消息传送的关键所在,同时,支持确认也是 JMS API 语义的要求.以下将分别从消息生产者.消息服务器.消息消费者的角度,来考察消息确认机制. 从消息生产者的角度考察 ...