<!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. 数据库插入某些数据会变成？，或则select无法读出数据库中的某些数据

    如果你想在数据库中插入“uɷ”,这个字符,直接插入 insert into table value (‘uɷ’),是不行的,这样插入的后果是打开数据后会显示为u?.当你面对这个问题的时候是不是第一个想 ...

  3. Python学习 之 对内存的使用（浅拷贝和深拷贝）

    1.浅拷贝:对引用的拷贝,只拷贝父对象 cope() 深拷贝:对对象资源的拷贝 deepcope()

  4. 网口扫盲三:以太网芯片MAC和PHY的关系

    转载:http://www.cnblogs.com/jason-lu/articles/3195473.html   问:如何实现单片以太网微控制器? 答:诀窍是将微控制器.以太网媒体接入控制器(MA ...

  5. Hummer框架平台介绍

    三年工作过程中经常会用到使用Java开源框架,但经常会遇到重新组合比较麻烦,本次采用目前主流开源框架及插件整理出一套融合开发.测试.部署整个流程的平台. 本平台采用Hummer代号,是悍马和蜂鸟分意思 ...

  6. AngularJs学习经验汇集

    >>关于ng-include 有时候你会发现你用这个指令想要加载某个模板总是加载不出来,url明明是对的,页面还是一片空白,这里有一个细节要注意以下: <div ng-include ...

  7. [改善Java代码]用整数类型处理货币

    建议22:用整数类型处理货币. public class Client { public static void main(String[] args) { System.out.println(&q ...

  8. 汇总#pragma用法

    这几天忙着去复习了,但是心理总是不踏实,不到实验室里就觉得一天的生活变了个样,现在还是晚上来这里“搞起”吧,白天还是在复习准备考试.因为要开始学习freescale,准备明年的比赛了,觉得是时候开始搞 ...

  9. 并查集（UVA 1106）

    POINT: 把每个元素看成顶点,则一个简单化合物就是一条无向边,若存在环(即k对组合中有k种元素),则危险,不应该装箱,反之,装箱: 用一个并查集维护连通分量集合,每次得到一种化合物(x, y)时检 ...

  10. 对微信小程序的看法，不吹不黑

    今日微信小程序正式上线了,昨天也稍稍地研究了一下小程序的概念以及开发过程.简而言之,微信小程序就是一款在微信端的轻应用,其实在支付宝也有类似的功能,只不过支付宝没有开放接口,而微信开放了接口供开发者开 ...