js实现ajax分页完整实例
作者：zhangw428 发布时间：2024-05-21 10:12:49
标签：ajax,分页
本文实例讲述了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程序设计有所帮助。
0
投稿猜你喜欢
- 1. 背景在使用selenium浏览器渲染技术，爬取网站信息时，一般来说，速度是很慢的。而且一般需要用到这种技术爬取的网站，反爬技术都比较厉
- 我们首先来看下实例代码：import urllibimport urllib.requestimport refrom urllib imp
使用pandas读xlsx文件读取前n行数据读取指定数据（指定行指定列）获取文件行号和列标题将数据转换为字典形式import pandas- 这个项目到一开始的kickoff到现在，持续了很长的一段时间，现在差不多也接近了尾声，所以要好好做个总结，下面不会设计到太多技术层面上的东西
- Python做三子棋游戏，这个是我刚开始了解做Python小游戏的时候第一个项目，因为简单好入手，实现它的过程是我开始摸索Python的GU
- 1.准备工作1.在文件里找到设置2.在项目里找到python解释器，点击右边的加号3.搜素pygame并安装同理下载pgzero安装包2.开
- 一. ADO.NET的定义ADO.NET来源于COM组件库ADO(即ActiveX Data Objects)，是微软公司新一代.NET数据
- 切片与数组数组数组是具有相同 唯一类型 的一组以编号且长度固定的数据项序列数组声明var identifier [len]type切片切片（
- 新闻系统，相册系统可以用用哦，简单实用，有兴趣的可以自己扩充！^_^相册截图：<?xml version="1.0"
- 前言：并行编程比程序编程困难，除非正常编程需要创建大量数据，计算耗时太长，物理行为模拟困难例子：N体问题物理前提：牛顿定律时间离散运动方程普
- 一篇关于STR和UNICODE的好文章整理下python编码相关的内容注意: 以下讨论为Python2.x版本, Py3k的待尝试开始用py
- 面是我下载页面down.php 的php代码 现在我发现，用迅雷，谷歌浏览器直接打开，就能输出下载文件，一点不起防盗链作用。&nb
- 一、导入所需的库import randomimport cv2from matplotlib import pyplot as pltimp
- 前言：对于 图片处理，在日常生活中我们常常能够看到。比如发个朋友圈之前，我们需要给自己的照片加个滤镜；在上传头像时候，需要对照片进行裁剪，这
- 1 Neural Networks 神经网络1.1 Visualizing the data 可视化数据这部分我们随机选取100个样本并可视
- 在现在的项目里，不管是电商项目还是别的项目，在管理端都会有导出的功能，比方说订单表导出，用户表导出，业绩表导出。这些都需要提前生成excel
- 先来看个例子：需求为生成4位数，不足前面补0<?php //生成4位数，不足前面补0 $var=sprintf
- 说起 Python 强大的地方，你可能想到是它的优雅、简洁、开发速度快，社区活跃度高。但真正使得这门语言经久不衰的一个重要原因是它的无所不能
- 本文实例讲述了Python挑选文件夹里宽大于300图片的方法。分享给大家供大家参考。具体分析如下：这段代码需要用到PIL库。代码如下所示：i
- 是否也像拥有自己的机器人呢？不挨个展示了。比如说你想实现一个夸人的功能："""作者：川川时间：2021/4/6
