js分页实现，前端实现。

最新推荐文章于 2024-03-19 05:05:30 发布
最新推荐文章于 2024-03-19 05:05:30 发布
阅读量4w 收藏 65
点赞数 12
分类专栏： JS中实用的小方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuzijiang1123/article/details/54096244
版权

   主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。


其实分页最关键是这两句：

var startRow = (currentPage - 1) * pageSize+1;  //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize;


找到我们需要显示的行的范围（starRow~endRow）


ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！


效果图：



<!doctype html>
<html>
<head>
 <meta charset='utf-8'>
 <style type="text/css">
  
   	 a{
		text-decoration: none;
	}
	
	.table2{
		border:#C8C8C8 solid;   
		border-width:1px 0px 0px 1px; 
		background: #F3F0F0;
		margin-top:25px;
	}
	
	.td0{
    	border:#C8C8C8 solid;  
		border-width:0 0 1px 0;
	}
	
	.td2{
    	border:#C8C8C8 solid;   
		border-width:0 1px 1px 0 ;
	}
	
	.barcon {
		width: 1000px;
		margin: 0 auto;
		text-align: center;
     }

	.barcon1 {
	    font-size: 17px;
	    float: left;
	    margin-top: 20px;
	}

	.barcon2 {
		float: right;
	}

	.barcon2 ul {
    	margin: 20px 0;
    	padding-left: 0;
    	list-style: none;
    	text-align: center;
	}

	.barcon2 li {
    	display: inline;
	}

	.barcon2 a {
		font-size: 16px;
		font-weight: normal;
		display: inline-block;
		padding: 5px;
		padding-top: 0;
		color: black;
		border: 1px solid #ddd;
		background-color: #fff;
	}

	.barcon2 a:hover{
		background-color: #eee;
	}

	.ban {
    	opacity: .4;
	}
 </style>
</head>
<body>
    <table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
	<thead>
	<tr>
	<td colspan="3" height="33" class="td0"> </td>
	<td align="center" class="td2"><a href="###">添加用户</a></td>
	</tr>
	<tr align="center">
		<th width="150" height="33" class="td2">序号</th>
		<th width="300" class="td2">用户名</th>
		<th width="250" class="td2">权限</th>
		<th width="250" class="td2">操作</th>
	</tr>
	</thead>
	<tbody id="adminTbody">
	<tr align="center">
		<td class="td2" height="33" width="150">1</td>
		<td class="td2" >admin</td>
		<td class="td2" >管理员</td>
		<td class="td2" ><a href="###">修改</a></td>
	</tr>
	</tbody>
</table>
<div id="barcon" class="barcon" >
	<div id="barcon1" class="barcon1"></div>
		<div id="barcon2" class="barcon2">
			<ul>
				<li><a href="###" id="firstPage">首页</a></li>
				<li><a href="###" id="prePage">上一页</a></li>
				<li><a href="###" id="nextPage">下一页</a></li>
				<li><a href="###" id="lastPage">尾页</a></li>
				<li><select id="jumpWhere">
				</select></li>
				<li><a href="###" id="jumpPage" οnclick="jumpPage()">跳转</a></li>
			</ul>
		</div>
</div>
<script src="jquery.js"></script>
<script>
/*动态生成用户函数
 num为生成的用户数量
*/
function dynamicAddUser(num){
	for(var i=1;i<=num;i++)
	{
			var trNode=document.createElement("tr");
			$(trNode).attr("align","center");
			//序号
			var tdNodeNum=document.createElement("td");
			$(tdNodeNum).html(i+1);
			tdNodeNum.style.width = "150px";
			tdNodeNum.style.height = "33px";
			tdNodeNum.className = "td2";
			//用户名
			var tdNodeName=document.createElement("td");
			$(tdNodeName).html("lzj"+i);
			tdNodeName.style.width = "300px";
			tdNodeName.className = "td2";
			//权限			
			var tdNodePri=document.createElement("td");
			tdNodePri.style.width = "250px";
			tdNodePri.className = "td2";
			var priText=document.createElement("span");
			$(priText).css({"display":"inline-block","text-align":"center"});
			$(priText).text("普通用户");
			tdNodePri.appendChild(priText);
			//操作
			var tdNodeOper = document.createElement("td");
			tdNodeOper.style.width = "170px";
			tdNodeOper.className = "td2";
			var editA = document.createElement("a");
			$(editA).attr("href", "###").text("编辑");
			$(editA).css({ display: "inline-block" });
			tdNodeOper.appendChild(editA);

			trNode.appendChild(tdNodeNum);
			trNode.appendChild(tdNodeName);
			trNode.appendChild(tdNodePri);
			trNode.appendChild(tdNodeOper);
			$("#adminTbody")[0].appendChild(trNode);
	}
}
$(function(){
	dynamicAddUser(80);
	goPage(1,10);
	var tempOption="";
	for(var i=1;i<=totalPage;i++)
	{
		tempOption+='<option value='+i+'>'+i+'</option>'
	}
	$("#jumpWhere").html(tempOption);
})

/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/

var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
    var itable = document.getElementById("adminTbody");
    var num = itable.rows.length;//表格所有行数(所有记录数)

     pageSize = psize;//每页显示行数
    //总共分几页 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
       }else{   
           totalPage=parseInt(num/pageSize);   
       }   
    var currentPage = pno;//当前页数
	 currentPage_=currentPage;
    var startRow = (currentPage - 1) * pageSize+1; 
    var endRow = currentPage * pageSize;
        endRow = (endRow > num)? num : endRow;    
       //遍历显示数据实现分页
    /*for(var i=1;i<(num+1);i++){    
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "";    
        }else{
            irow.style.display = "none";
        }
    }*/

	$("#adminTbody tr").hide();
	for(var i=startRow-1;i<endRow;i++)
	{
		$("#adminTbody tr").eq(i).show();
	}
    var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
	 document.getElementById("barcon1").innerHTML = tempStr;
	 
    if(currentPage>1){
		$("#firstPage").on("click",function(){
			goPage(1,psize);
		}).removeClass("ban");
		$("#prePage").on("click",function(){
			goPage(currentPage-1,psize);
		}).removeClass("ban");   
    }else{
		$("#firstPage").off("click").addClass("ban");
		$("#prePage").off("click").addClass("ban");  
    }

    if(currentPage<totalPage){
		$("#nextPage").on("click",function(){
			goPage(currentPage+1,psize);
		}).removeClass("ban")
		$("#lastPage").on("click",function(){
			goPage(totalPage,psize);
		}).removeClass("ban")
    }else{
		$("#nextPage").off("click").addClass("ban");
		$("#lastPage").off("click").addClass("ban");
    }   
	
	$("#jumpWhere").val(currentPage);
}


function jumpPage()
{
	var num=parseInt($("#jumpWhere").val());
	if(num!=currentPage_)
	{
		goPage(num,pageSize);
	}
}

</script>
</body> 
</html>





Muscle_Mliu
关注
  • 12
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
纯JS前端实现分页代码
10-22
主要介绍了纯JS前端实现分页代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
微信小程序开发：向数组中插入数据
Smallmouse96的博客
05-19 9872
每次请求的数据插入到定义的数组中，之前数据不覆盖 concat(); Page({ data: { content: ['aaa', 'bbb', 'ccc'] }, //监听页面滚动到底部 onReachBottom() { const than = this; this.setData({ content: than.data.content.concat(than.data.content) }) } }) ...
js实现分页
iastro的专栏
07-23 2085
&lt;table class="table table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;日期&lt;/th&gt; &lt;th&gt;小时&lt;/th&gt; &lt;th&gt;温度&amp
JavaScript经典实例之分页（简单易用）原生js封装分页
最新发布
m0_61408947的博客
03-19 1004
/每次选择要重新处理按钮//响应点击事件//首页是否有效}else{//前一页按钮是否有效}else{//nav_rela}else{}else{//右边隐藏节点数//选择当前页i++){if(i==curPage){//选择当前页}else{if(leftCount
js创建分页脚本
dly120219891208的专栏
07-28 1310
//创建分页脚本 //_nPageCount 总页数 _nCurrIndex 当前页 _sPageName页面名 _sPageExt 页面后缀 function createPageHTML(_nPageCount, _nCurrIndex, _sPageName, _sPageExt){ if(_nPageCount == null || _nPageCou
js实现一个简单的分页
天高任鸟飞
04-16 950
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; //初始化历史指标数据 fun...
JS简单实现分页显示
weixin_34186950的博客
12-12 930
完整代码源码可以在这里下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body> <!--页面控制器 --> <div id="nav"></div> <!--列表显示 --> <div class="root" id="target"></d...
纯js实现分页
weixin_34284188的博客
01-13 216
原理：所有数据已加载好，js通过遍历部分显示，实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <script type="text/javascript" src="page.js"></script> <style type="text/css...
纯JS实现前端动态分页码
weixin_34293141的博客
10-10 216
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在body中添加div ...
JS前端表格分页
郑子健的博客
07-10 572
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title> <!-- 引入elementUI样式 --> <link rel
纯JS实现简单的分页功能
一只鱼啊
10-17 599
纯JavaScript实现简单的分页功能：/** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能 **/ //设置body的onLoad属性，设置当前页数和每页显示的总数据。
JavaScript分页函数
12-05
JS分页主函数: function pageQuery(inputNode,readonlyNodeName,displayNodeId) { globalInputNode = inputNode; globalInputNodeValue = inputNode.value; globalReadonlyNodeName=readonlyNodeName; globalDisplayNodeId = displayNodeId; alert("globalDisplayNodeId:" + globalDisplayNodeId); alert("globalInputNodeValue:" + globalInputNodeValue); //alert("getCount:" + getCount); //取得最大数量 //例如: GetCompanyCommonAction.doGetCompanyCount(globalInputNodeValue,getCount); doGetCountCallback(globalInputNodeValue,getCount); }
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
js实现前端分页页码管理
11-27
用JS实现前端分页页码管理，可以很美观的区分页码显示（这也是参考大多数网站的分页页码展示），能够有很好的用户体验，这也是有业务需要就写了一下，还是新手，经验不足，欢迎指出批评！ 首先先看效果图： 这是初始...
JavaScript实现前端分页控件
11-27
当后台数据到达后，浏览器重新渲染界面当然也包括js分页控件，如果觉得每次绘制分页控件对前端性能有影响也可以不绘制，但实现起来相对麻烦。  本人写的分页控件参考了其他网友的代码，链接忘了，控件接受四个参数...
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE ...
js动态生成xml数据格式
热门推荐
liuzijiang1123的专栏
04-07 1万+
后来才发现我们只需这样把字符串按xml的形式传递给底层即可. var xml='&lt;Setup&gt;'+ '&lt;ProtocolList&gt;'+ '&lt;Protocol&gt;'+ '&lt;Name&gt; onvif &lt;/Name&gt;'+ '&lt;UserName&gt; ad...
前端分页实现demo
08-09
前端分页是指通过前端技术来实现对大量数据进行分页显示的功能。以下是一个简单的前端分页实现demo示例： HTML结构部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端分页示例</title> </head> <body> <div id="pagination"></div> <ul id="dataList"></ul> <script src="pagination.js"></script> <script> // 模拟的数据列表 var dataList = [ {id: 1, name: "张三"}, {id: 2, name: "李四"}, {id: 3, name: "王五"}, // 此处省略部分数据 {id: 10, name: "赵六"}, {id: 11, name: "钱七"} ]; // 初始化分页器 var pagination = new Pagination("pagination", { totalCount: dataList.length, // 数据总数 pageSize: 5, // 每页显示的数据条数 onPageChange: function(pageIndex) { // 切换页码的回调函数 renderDataList(pageIndex); } }); // 渲染数据列表 function renderDataList(pageIndex) { var start = pageIndex * pagination.options.pageSize; var end = start + pagination.options.pageSize; var currentDataList = dataList.slice(start, end); var html = ""; for (var i = 0; i < currentDataList.length; i++) { html += "<li>" + currentDataList[i].id + " - " + currentDataList[i].name + "</li>"; } document.getElementById("dataList").innerHTML = html; } // 初始化时渲染第一页数据 renderDataList(0); </script> </body> </html> ``` JavaScript部分（pagination.js）： ```javascript function Pagination(id, options) { this.container = document.getElementById(id); this.options = Object.assign({ totalCount: 0, pageSize: 10, onPageChange: function() {} }, options); this.init(); } Pagination.prototype.init = function() { this.pageCount = Math.ceil(this.options.totalCount / this.options.pageSize); this.currentPage = 0; this.render(); }; Pagination.prototype.render = function() { var html = "<button onclick='pagination.prev()'>上一页</button><span>" + (this.currentPage + 1) + " / " + this.pageCount + "</span><button onclick='pagination.next()'>下一页</button>"; this.container.innerHTML = html; }; Pagination.prototype.prev = function() { if (this.currentPage > 0) { this.currentPage--; this.options.onPageChange(this.currentPage); this.render(); } }; Pagination.prototype.next = function() { if (this.currentPage < this.pageCount - 1) { this.currentPage++; this.options.onPageChange(this.currentPage); this.render(); } }; ``` 通过在HTML中引入pagination.js文件，创建一个`Pagination`对象进行初始化，并传入相关配置。在切换页码时，会调用`onPageChange`配置的回调函数，利用`renderDataList`函数渲染对应页码的数据列表。同时，前端分页的原理是通过切片（`slice`）方法来提取对应页码的数据，在HTML中通过按钮的点击事件来切换页码，更新当前页码并重新渲染分页器和数据列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值