js实现ajax分页完整实例
作者：zhangw428 时间：2024-05-21 10:12:49
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<style type="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<div id="demo" style="width:500px;margin:10px auto;"></div>
<script type="text/JavaScript">
<!--
function initPage(totalPages,curPage,middlePage,Container){
var htmlstr = '';
if(curPage > totalPages) {curPage = totalPages}
if(curPage < 0) {curPage = 1}
var curBigPage = Math.ceil(curPage/middlePage)
//当前所在的屏数,如curPage=21,总页数为50页时,屏数就是3（当前是第几屏）实际上是这种形式：Math.ceil(curPage*pageSize/pageSize*perPage)
var totalBigPage = Math.ceil(totalPages/middlePage); //总的屏数
if( totalPages < middlePage){
for(var i=1;i<totalPages+1;i++){
if(i == curPage){
htmlstr += '<span class="currentPage">' + i + '</span>';
}else{
htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage('+ totalPages+','+i+','+middlePage +',/''+ container+'/');getPageData('+ i+');return false" class="ajax_page">'+i +'</a>';
}
}
}else{
var curBigStart = (curBigPage-1)*middlePage + 1;
if(curBigPage == totalBigPage){
var curBigEnd = totalPages;
}else{
var curBigEnd = curBigPage * middlePage;
}
if(curBigPage != 1){ //前一屏
var preCurPage = curBigStart - middlePage;
htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage('+ totalPages+','+preCurPage+','+middlePage +',/''+ container+'/');getPageData('+ preCurPage +');return false" class="ajax_page">pre</a>';
}
for(var i=curBigStart;i<=curBigEnd;i++){
if(i == curPage){
htmlstr += '<span class="currentPage">' + i + '</span>';
}else{
htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage('+ totalPages+','+i+','+middlePage +',/''+ container+'/');getPageData('+ i +');return false" class="ajax_page">' + i + '</a>';
}
}
if(curBigPage != totalBigPage){ //后一屏
var nextCurPage = curBigStart + middlePage;
htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initPage('+ totalPages+','+nextCurPage+','+middlePage +',/''+ container+'/');getPageData('+ nextCurPage + ');return false" class="ajax_page">next</a>';
}
}
document.getElementById('demo').innerHTML = htmlstr
}
function getPageData(i){
alert('现在取第 '+i+ ' 页数据'); //ajax get data
}
initPage(50,2,10,'demo');
// --></script>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
标签：ajax,分页
0
投稿猜你喜欢
分享2个方便调试Python代码的实用工具
2021-08-26 18:50:08
Django实现前台上传并显示图片功能
2022-04-05 19:49:39
举例讲解Python常用模块
2022-03-21 07:35:49
Python入门教程4. 元组基本操作 <font color=red>原创</font>
2021-01-12 09:53:21
用Python程序抓取网页的HTML信息的一个小实例
2021-02-14 12:52:05
Windows XP操作系统下的MYSQL安装过程
2008-11-24 12:52:00
Vue3兄弟组件传值之mitt的超详细讲解
2023-07-02 16:56:04
浅谈Keras的Sequential与PyTorch的Sequential的区别
2021-08-24 07:53:35
艺术和设计之间的差别
2010-11-17 19:28:00
如何处理Python3.4 使用pymssql 乱码问题
2021-07-02 12:01:11
Python面向对象编程中关于类和方法的学习笔记
2023-07-20 00:13:37
设计规范有谱么?
2008-06-06 12:28:00
Python curses内置颜色用法实例
2021-07-27 02:41:35
Dreamweaver MX技巧之超链接
2009-05-29 18:40:00
Django filter动态过滤与排序实现过程解析
2022-01-07 18:16:54
SQLServer 日期函数大全(小结)
2024-01-13 05:36:32
Mysql自增主键id不是以此逐级递增的处理
2024-01-19 03:07:55
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2021-01-28 20:36:55
用于业余项目的8个优秀Python库
2022-04-04 09:44:51
IDEA最新激活码永久激活教程附激活失败原因汇总
2023-12-13 11:57:29
