js实现一个简单的分页

28人阅读 评论(0) 收藏 举报
分类:

tip:只适合一些"小打小闹"的

js部分如下

	var sizeP = 5;//设置每页显示的个数
	
	var size = sizeP;//每页显示的个数
	var up = 0;//当前页开始的位置
	var down = 0;//当前页结束的位置
	var v1 = 0;
	var v2 = 0;
	var up1 = 0;
	var up2 = 0;
	
	//初始化历史指标数据
	function initItemHistoryData() {
		$.ajax({
			type:'post',
			url:'地址',
			data:'参数',
			success:function(data){
				tempArray = data;
				var len = data.length;
				if(len <= size){
					$("#downL").hide();
					$("#upll").hide();
					size = len;
				}else{
					$("#downL").show();
					size = sizeP;
				}
				for(var i=0; i<size; i++){
					html += "<tr class='text-c' >\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "<td>"+tempArray[i]+"</td>\n";
					html += "</tr>\n";
				}		
				up = up+size;
				v1 = len%sizeP;
				v2 = len - v1;
				$(".gradeReportTbody").html(html);
			},
			error:function(){
				alertInfo("数据加载失败...");
				//$("#itemHistoryModal").modal("hide");
			}	
		});
	}
	
	//下一页
	function downL(){
		$("#upll").show();
		var html = "";
		for(var i=up; i<up+size; i++){
			html += "<tr class='text-c' >\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "</tr>\n";
		}		
		if(tempArray.length == (up+size) || tempArray.length == (up+size+sizeP)){
			$("#downL").hide();
			$("#upll").show();
		}
		up=up+size;
		if(v2 == up){
			size = v1;
		}
		//console.log(up + "-------------------" + (up+size));
		$(".gradeReportTbody").html(html);
	}
	//上一页
	function upL(){
		$("#downL").show();
		size = sizeP;
		if(up % size != 0){
			//size = v1;
			up1 = up-size-up % size;
			up2 = up1+size;
			size = v1;
		}else{
			up1 = up-size*2;
			up2 = up-size;
		}
		//console.log(up1 + "******************" + up2);
		var html = "";
		for(var i=up1; i<up2; i++){
			html += "<tr class='text-c' >\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "<td>"+tempArray[i]+"</td>\n";
			html += "</tr>\n";
		}	
		up = up-size;
		if(up == sizeP){
			$("#downL").show();
			$("#upll").hide();
		}
		$(".gradeReportTbody").html(html);
	}
	
	//重置所有参数
	function closeButton(){
		tempArray.length = 0;
		size = sizeP;
		up = 0;
		down = 0;
		v1 = 0;
		v2 = 0;
		up1 = 0;
		up2 = 0;
	}

html部分如下

<div class="modal fade" id="itemHistoryModal" tabindex="-1"
	data-backdrop="static">
	<div class="modal-dialog " style="width:900px;margin-top:20px;">
		<div class="modal-content">
			<div class=" r">
				<button type="button" class="btn  btn-danger btn-sm"
					data-dismiss="modal" onclick="closeButton()">关闭</button>
			</div>
			<div class="modal-body"	style="color:black !important;margin-bottom: 50px;margin-top: 30px;">
				<table class="table-items table table-border table-bordered table-bg table-hover">
					<thead>
						<tr class="text-c">
						    <th>项目</th>
						    <th>项目</th>
						    <th>项目</th>
						</tr>
					</thead>
					<tbody class="gradeReportTbody">
					</tbody>
				</table>
			<div class="r" style="margin-top: 10px;">
				<button type="button" class="btn  btn-success btn-sm" onclick="upL()" id="upll">上一页</button>
				<button type="button" class="btn  btn-danger btn-sm"  onclick="downL()" id="downL" >下一页</button>
			</div>
			</div>
		</div>
	</div>
</div> 
            
查看评论

用JS实现前端分页的简单方法

昨天朋友问我,后台传过来的数据在前端分页显示怎么做。 我也只做过后台分页查询前端显示的方法,没有做过后台不分页而在前端分页的形式。 于是研究了下后台返回全部数据,在前端将数据分页显示的办法。自己研究再...
  • liuyeshennai
  • liuyeshennai
  • 2016-03-03 23:39:27
  • 34032

纯js分页-用js实现分页显示

  • 2009年01月05日 09:22
  • 105KB
  • 下载

简单的分页代码js实现

先看看效果图: 简单的分页js代码: 1、效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 2、调用方法:$(".tc...
  • SeekerTime
  • SeekerTime
  • 2017-07-10 20:18:51
  • 863

原生js实现带运动的分页效果

本例最终效果如下图,当切换页码时,本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失,然后新页码内的课程依次从底部中间的位置运动到原始位置。 首先实现分页效果,然后将运动和分页结合。...
  • Della_UI
  • Della_UI
  • 2016-12-08 21:10:58
  • 1440

vuejs2.0实现一个简单的分页

实现的分页结果如图所示: css .page-bar{ margin:40px; } ul,li{ margin: 0px; padding: 0px; } li{...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-23 08:37:35
  • 1164

js分页功能

  • 2011年11月03日 10:17
  • 26KB
  • 下载

JS之页面实现多个分页

JS之页面实现多个分页
  • netuser1937
  • netuser1937
  • 2017-02-08 08:35:07
  • 1778

jsp实现简单分页功能

一.webcontend层 1.webcontent/common/meta.jsp 代码: 2.webcontent/page/page.jsp WEB-...
  • CarryBest
  • CarryBest
  • 2017-04-20 09:17:34
  • 574

原生JS实现排序和分页的代码

原生JS实现排序和分页的代码 代码下载地址:http://www.zuidaima.com/share/1550463246568448.htm...
  • yaerfeng
  • yaerfeng
  • 2014-07-05 11:18:32
  • 2652

从零开始实现一个简单的分页

前言 分页技术就是JSP页面用来显示数据。如果有100条数据,分页显示,每页显示10条,总共有10页;好处就是利于页面布局,且显示效率高。分页关键点1. 分页的SQL语句 //admin被分...
  • chengyunyi123
  • chengyunyi123
  • 2016-12-28 09:32:49
  • 419
    个人资料
    等级:
    访问量: 88
    积分: 42
    排名: 168万+
    文章分类
    文章存档