<!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. apache 配置order allow deny讲解

    http://www.111cn.net/phper/apache/43025.htm

  2. c语言函数传递数组

    1.传递数组,打印不出来 #include <stdio.h> void solve() { printf(]); } int main() { int i; ;i<n;i++) { ...

  3. 深入理解 GCD

    前言 首先提出一些问题: dispatch_async 函数如何实现,分发到主队列和全局队列有什么区别,一定会新建线程执行任务么? dispatch_sync 函数如何实现,为什么说 GCD 死锁是队 ...

  4. nodejs的mysql模块学习(三)数据库连接配置选项详解

    连接选项 当在创建数据连接的时候 第一种大多数人用的方法 let mysql = require('mysql'); let connection = mysql.createConnection({ ...

  5. android网络请求之POST方法

    package com.jredu.helloworld.activity; import android.os.Bundle; import android.os.Handler; import a ...

  6. SQL Server2008创建约束图解 转

    转自 http://www.cnblogs.com/longhs/p/3670307.html SQLServer 中有五种约束, Primary Key 约束. Foreign Key 约束. Un ...

  7. MySQL 更改默认编码为 utf8 （转）

      转自blog.sina.com.cn/s/blog_4c451e0e0100vefm.html 1.打开MySQL安装目录找到 my.ini,如:C:\Program Files\MySQL\My ...

  8. 用bash命令得到Windows一个目录下的所有文件并且把结果输入到一个文件

    方式一: 只用如下一条语句就可以了: tree/f>index.txt 放入一个文件中命名为"****.bat" 双击就会在该目录下生成一个index.txt文件,在这个文件 ...

  9. [未完成]关于SQL语句的总结

    关于SQL语句的总结关于SQL语句的总结关于SQL语句的总结关于SQL语句的总结关于SQL语句的总结

  10. ubuntu共享文件夹给virtualbox

    在ubuntu或者linuxmint等linux系统下安装了virtualbox,可以通过共享文件夹的方式,把文件夹共享给virtualbox下的虚拟机系统,我这里的虚拟机系统是win7,共享过程如下 ...