<!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. UIDatePicker的时间选择器里的时区的问题

    转自:http://www.cocoachina.com/bbs/simple/?t70445.html 初始化代码: - (void)viewDidLoad { [super viewDidLoad ...

  2. Python学习 之 异常

    1.python中处理异常的方式 #coding:utf8 filename=raw_input("请输入你要操作的文件") try: f=open(filename) print ...

  3. 从B树、B+树、B*树谈到R 树

    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

  4. DDNS 的工作原理及其在 Linux 上的实现--转

    http://www.ibm.com/developerworks/cn/linux/1305_wanghz_ddns/index.html DDNS (Dynamic DNS) 扩展了 DNS 将客 ...

  5. 数据库SQLite应用

    1.导入SQLite库和头文件 #import <sqlite3.h> 2.打开数据库,如果在打开的时候遇到了问题,则关闭它并抛出一个断言错误. sqlite3 * database; i ...

  6. 连续调用inet_ntoa打印出错的问题

    近日写程序,在打印信息的时候调用了inet_ntoa函数,出现了打印一直出错的情况.google了一下,是因为inet_ntoa这类函数没有保证线程安全,其实现原理是在静态内容中申请一块内存,每次调用 ...

  7. South——谁说Django不能migrate！

    零.前言 最近改一个项目,需要对已有的model进行更改.大家都知道Django自带的syncdb只能创建数据库,但是无法将已经改变的model应用的数据库中. 大概两年前遇到这个问题的时候,网上的答 ...

  8. velocity基本用法

    1.定义变量 #set($root="www");#set($name="index.vm");#set($tmp="$root/$name" ...

  9. 关于hadoop2.4.1伪分布式系统的搭建

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  10. hdu 1518 深搜

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...