<!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. iOS strong 和weak的形象理解

    转自:http://hi.baidu.com/phone_lwc/item/c36e5bfe1cf9c313ce9f32be 觉得讲的很容易理解 The difference is that an o ...

  2. qsort函数、sort函数 (精心整理篇)

    先说明一下qsort和sort,只能对连续内存的数据进行排序,像链表这样的结构是无法排序的. 首先说一下, qsort qsort(基本快速排序的方法,每次把数组分成两部分和中间的一个划分值,而对于有 ...

  3. 【ZZ】MySql语句大全：创建、授权、查询、修改等

    http://blog.csdn.net/evankaka/article/details/45580845

  4. 搭建属于自己的wiki

    1.开源wiki mediawiki http://www.mediawiki.org/wiki/MediaWiki 2. 开发文档 http://www.mediawiki.org/wiki/Man ...

  5. hive-安装MySQL(centos6.4)

    为安装hive做准备,以前装过无数次,在线的.tar包的,一直不用忘得差不多了. centos6.4 虚拟机 先看有没有装,有的话应该是自带的,卸载就可以了 命令分别是 然后在线安装,命令是 (-y是 ...

  6. android-ramdisk.img分析、recovery.img&boot.img执行过程

    转载请注明来源:cuixiaolei的技术博客 一.ramdisk介绍 ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统.对于传统的磁盘文件系 ...

  7. [未完成]关于JavaScript总结

    jsp服务端,js客户端. javascript 是基于对象和事件驱动的脚本语言. 特点: 交互性 安全性(不允许直接访问本地硬盘) 跨平台性(只要是可以解析java的浏览器都可以执行,和平台无关) ...

  8. VbCrlf的相关说明

    今天从别人发来的手顺书中发现了这几个字母,一头雾水,下面查了一下相关资料. vbCrLf是Visual Basic中的一个字符串常数,即“Chr(13) & Chr(10)”(回车符与换行符连 ...

  9. ubuntu下安装Sublime Text并支持中文输入

    Sublime Text还是文本编辑器中比较不错的,就是他的文件对比有些差劲吧,还有中文输入需要打补丁,不知道开发者是怎么想的... 当然,这个软件是收费的,但是不买也能一直的使用,在我天朝就这点好处 ...

  10. Linux 命令 - crontab: 任务调度

    cron 是一个 Linux 下的定时执行工具,可以在无需人工干预的情况下运行作业.守护进程 cron 会读取 crontab 文件,根据配置在指定的时间执行任务.contab 命令用来添加.删除.显 ...