纯js分页,javascript

于 2020-08-12 19:00:06 发布
阅读量167 收藏
点赞数
分类专栏： html js springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46305078/article/details/107963988
版权
springboot 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
html
8 篇文章 0 订阅
订阅专栏
js
6 篇文章 0 订阅
订阅专栏

遇到的问题：
之前做的分页用的是themleaf分页，在每一个分页处我都写了href提交查询，每点击下一页的时候都会提交url查询，查询的数据只是那一页要显示的数据，提交的url中拼接的值是通过themleaf来取值的，遇到中文查询的时候会编码错误。
在这里插入图片描述
解决：
由于themleaf没办法编码，要通过js编码，所以要去掉href，而是js查询，可是尝试了很多次js中取值，不好取，因为这些值都是用themleaf来取，在js中用themleaf取值也可行，但是我尝试后发现不成功。于是打算用纯js分页。就是在点击查询按钮的时候，查到所有的数据，js选择显示部分，其他部分可以不显示。这样就不用每次点击下一页都要查询数据，就避免了中文url的问题，还省去了编码。

需要到的其他代码在上一篇链接: themleaf+html+springboot实现分页.
参考了代码 链接: link.
链接: link.

点击查询按钮查询那部分的地方不用改，该查到的数据一次性查到。
不管是查询全部还是关键字查询到，把查询到的所有数据分页显示。点击页数的时候不到后台重新查询数据。
之前那种前端拿到的数据只是那一页显示的数据，而不是全部。当点击下一页，如果是关键字查询会把关键字再带到后台进行查询，如果不是关键字查询一样会再查询。
js代码

/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    console.log(num);
    var totalPage = 0;//总页数
    var pageSize = 10;//每页显示行数
    //总共分几页
    if(num/pageSize > parseInt(num/pageSize)){
        totalPage=parseInt(num/pageSize)+1;
    }else{
        totalPage=parseInt(num/pageSize);
    }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31
    var endRow = currentPage * pageSize;//结束显示的行   40
    endRow = (endRow > num)? num : endRow;    //40
    console.log(endRow);
    //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "table-row";
        }else{
            irow.style.display = "none";
        }
    }
    var pageEnd = document.getElementById("pageEnd");
    var tempStr = '<lable style="width:100%;height:20px;padding-left:7px;font-size:12pt;font-family:Microsoft YaHei; background-repeat:repeat-x; display:block; margin-top: 5px;">共'+totalPage+'页,当前第'+currentPage+'页</lable>';

	var tempStr1 = "";
    if(currentPage>1){
        tempStr1 += "<li class='page-item'><a class='page-link'  onClick=\"goPage("+(1)+")\">首页</a></li>";
        tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(currentPage-1)+")\">上一页</a></li>"
    }else{
        tempStr1 += "<ul class='pagination'><li class='page-item'><a class='page-link'>首页</a></li>";
        tempStr1 += "<li class='page-item'><a class='page-link'>上一页</a></li>";
    }
    
    if(currentPage==1){
	        tempStr1 += "<li class='page-item active' ><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
    		 for(var pageIndex= currentPage+1;pageIndex<currentPage+5;pageIndex++){
    	   	        tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
    	   	    } 
    }
    else if(currentPage==2){
    			 for(var pageIndex= currentPage-1;pageIndex<currentPage;pageIndex++){
     	   	        tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
     	   	    } 
  	   	        tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
    			 for(var pageIndex= currentPage+1;pageIndex<currentPage+4;pageIndex++){
      	   	        tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
      	   	    } 
    		 }

    else if(currentPage>2 && currentPage<totalPage-1){
		 for(var pageIndex= currentPage-2;pageIndex<currentPage;pageIndex++){
	        tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
	    } 
  	        tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";

		 for(var pageIndex= currentPage+1;pageIndex<currentPage+3;pageIndex++){
		        tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
		    } 
    }
    
    else if(currentPage==totalPage-1){
		 for(var pageIndex= currentPage-3;pageIndex<currentPage;pageIndex++){
	        tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
	    } 
 	        tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
		    tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+totalPage+")\">"+ totalPage +"</a></li>";
   }
    
    else if(currentPage==totalPage){
		 for(var pageIndex= currentPage-4;pageIndex<currentPage;pageIndex++){
	        tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
	    } 
		    tempStr1 += "<li class='page-item active' ><a class='page-link' οnclick=\"goPage("+totalPage+")\">"+ totalPage +"</a></li>";
  }

 
    if(currentPage<totalPage){
        tempStr1 += "<li class='page-item'><a class='page-link'  onClick=\"goPage("+(currentPage+1)+")\">下一页</a></li>";
        tempStr1 += "<li class='page-item'><a class='page-link'  onClick=\"goPage("+(totalPage)+")\">尾页</a></li></ul>";
    }else{
        tempStr1 += "<li class='page-item'><a class='page-link'>下一页</a></li>";
        tempStr1 += "<li class='page-item'><a class='page-link'>尾页</a></li>";
    }
 
//     document.getElementById("barcon").innerHTML = tempStr;
    document.getElementById("a1").innerHTML = tempStr;
    document.getElementById("a2").innerHTML = tempStr1;
 
}

页面代码

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/orionicons.css}">
    <link rel="stylesheet" th:href="@{/css/style.default.css}" id="theme-stylesheet">
    <link rel="stylesheet" th:href="@{/css/all.css}">
<script th:src="@{/js/search2.js}"></script>
</head>
<body onLoad="goPage(1);">
<!-- navbar-->
<div th:replace="base/left::topbar"></div>
<div class="d-flex align-items-stretch">
  <div th:replace="base/left::sidebar"></div>
  <div class="page-holder w-100 d-flex flex-wrap">
    <div class="container-fluid px-xl-5">
      <section class="py-5">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                
                                      <div class="form-group">
                				  <form class="form-inline" th:action="@{/UserExcelDownloads}" method="get">
                                        <button type="submit" class="btn btn-success">导出数据</button>
                                    </form>
                                      </div>
                                       &nbsp;&nbsp;&nbsp;&nbsp;
                                        <div class="form-group">
					                  <form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
					                  <input type="date" name="datekey" id="show_date" class="date"  required th:value="${datekey!=null}?${datekey}" />
					                  &nbsp;
					                   <button type="submit" class="btn btn-success" id="timebutton">按时间查询</button>
					                  </form>
					                    </div>
					                     &nbsp;&nbsp;&nbsp;&nbsp;
                               		 <div class="form-group">
                                    <form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
                                        <input name="keyname" required th:value="${keyname}" class="form-control" type="text" placeholder="按姓名/任务点查询...">
                                      &nbsp;
                                        <button type="submit" class="btn btn-success">查询</button>
                                    </form>
                                      </div>
                                     &nbsp;&nbsp;&nbsp;&nbsp;
                                      <div class="form-group">
                                       <form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
                                        <input name="operationkey" required th:value="${operationkey!=null}?${operationkey}" class="form-control" type="text" placeholder="按运营场所查询...">
                                      &nbsp;
                                        <button type="submit" class="btn btn-success">查询</button>
                                    </form>
                                    </div>
                                      &nbsp;&nbsp;&nbsp;&nbsp;
                                        <div class="form-group">
                                       <form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
                                        <input name="tempkey" required th:value="${tempkey!=null}?${tempkey}" class="form-control" type="text" placeholder="按温度查询...">
                                      &nbsp;
                                        <button type="submit" class="btn btn-success">查询</button>
                                    </form>
                                     </div>
                                       &nbsp;&nbsp;&nbsp;&nbsp;
					                  <div class="form-group">
 									<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
					                    <select name="keyisnormal" class="form-control">
					                      <option th:value="全部" >按体温状态查询</option>
					                      <option th:value="正常"   >正常</option>
					                 	  <option th:value="异常"  >异常</option>
					                  	  <option th:value="无效"  >无效</option>
					                    </select>
					                     &nbsp;
					                      <button type="submit" class="btn btn-success">查询</button>
					                  </form>
					                  </div>
					                    &nbsp;&nbsp;&nbsp;&nbsp;
					                      <div class="form-group">
					               <form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
                                        <input name="floorkey" required th:value="${floorkey!=null}?${floorkey}" class="form-control" type="text" placeholder="按楼层查询...">
                                      &nbsp;
                                        <button type="submit" class="btn btn-success">查询</button>
                                    </form>
                                       </div>
                                </div>
                                <table class="table" >
                                    <br>
                                    <thead>
                                    <tr>
                                  			    <th style="width: 80px;">##</th>
												<th style="width: 130px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 150px;">##</th>
												<th style="width: 150px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 80px;">##</th>
												<th style="width: 150px;">##</th>
                                    </tr>
										</thead>
<!-- 										</table> -->
<!-- 										<table class="table" id="idData"> -->
                                    <tbody id="idData">
                                  <tr th:each="article:${temperatureRecordLists}">
                                 		 <td th:text="${pageNum}==1?${articleStat.index}+1:10*(${pageNum}-1)+${articleStat.index}+1" style="width: 80px"></td>
                                 	     <td style="width: 135px;height: 130px">
                                            <div class="fileupload-new thumbnail" style="width: 100px;height: 130px">
                                                <img th:src="@{${article.photoUrl}}" alt="" style="width: 100px;height: 130px" />
                                            </div>
                                         </td>
                                         <td th:text="${article.name}" style="width: 80px"></td>
                                         <td th:text="${article.sex}" style="width: 80px"></td>
                                         <td th:text="${article.temperature}" style="width: 80px"></td>
                                         <td th:text="${article.isNormal}" style="width: 80px"></td>
                                         <td th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm:ss')}" style="width: 150px"></td>
                                         <td th:text="${article.operation}" style="width: 150px"></td>
                                         <td th:text="${article.pointName}" style="width: 80px"></td>
                                         <td th:text="${article.floor}" style="width: 80px"></td>
                                         <td th:text="${article.xPoint}+' , '+${article.yPoint}+' , '+${article.zPoint}" style="width: 150px"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
              <section class="py-5">

<div class="row"  id="barcon" name="barcon">
<div class="col-4"></div>
<div class="form-control-label" id="a1"></div>
&nbsp;&nbsp;&nbsp;&nbsp; 
 					 <ul class="pagination" id="a2"> 
                      </ul>
</div>
            </section>
                    </div>
                </div>
            </section>
        </div>
        <nav aria-label="Page navigation example">
        </nav>
        <div th:replace="base/left::end"></div>
    </div>
</div>
<!-- JavaScript files -->
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>

页面加上<body onLoad="goPage(1);">
要显示的分页情况，自己可以在js做相应的修改。因为代码是之前的代码，修改的时候有些地方没修改掉，可能不需要到，可自行删除

welloffG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用面向对象实现的纯js分页
多少春秋风雨改 多少崎岖不变爱
09-16 3159
纯的javascript实现的面向对象的分页脚本 ，万能的分页脚本，跨平台的分页脚本 最近因为项目的原因，把此前写的分页组件重构了下，现在的显示风格是类似百度的那种，对整个代码的结构也优化了，增加了几个亮点： 1、将参数对象化，这也是“javascript语言精粹”中提倡的，这样可以方便的处理默认参数。 2、通过传入参数显示的支持了分页是异步还是同步的，默认是同步的，即刷新的。 3、添加了
JavaScript 分页算法
m0_57835615的博客
06-04 193
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分.
纯JS分页
12-09
js分页，让你的数据跟快。不要再等待。这是一个简单的分页代码。
纯js实现分页
weixin_34284188的博客
01-13 222
原理：所有数据已加载好，js通过遍历部分显示，实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <script type="text/javascript" src="page.js"></script> <style type="text/css...
纯js页面跳转整理
521478
05-18 191
js方式的页面跳转1.window.location.href方式    &lt;script language="javascript" type="text/javascript"&gt;           window.location.href="http://updn.cn";     &lt;/script&gt;2.window.navigate方式跳转   &lt;script...
纯简单JS分页
lgh_msn的专栏
12-11 2252
<br />做项目时偶尔有需求：数据一次性加载到页面同时还要实现分页，此时有两种方式一种是提交到当前页，这个里面会有一些变量需要置为hidden域，另外一种就是纯js分页。利用第一种方式效率不太高，存在多次访问数据库的问题，因而对于这种需要常常采用第二种方式。demo如下，实现思路：页面数据一次性全部加载完毕，js部分通过函数控制其是否显示达到分页的功能，有一个方法通过递归即可全部实现上一页、下一页、首页、尾页的功能，同时页面显示的分页点击部分也是由js内部innerHTML写入<br /> <br />1
纯js分页
中国凉茶
07-03 117
做项目时偶尔有需求：数据一次性加载到页面同时还要实现分页，此时有两种方式一种是提交到当前页，这个里面会有一些变量需要置为hidden域，另外一种就是纯js分页。利用第一种方式效率不太高，存在多次访问数据库的问题，因而对于这种需要常常采用第二种方式。demo如下，实现思路：页面数据一次性全部加载完毕，js部分通过函数控制其是否显示达到分页的功能，有一个方法通过递归即可全部实现上一页、下一页、首页、尾...
Fy:Fy.js一个纯JavaScript分页插件
07-06
一个纯JavaScript分页插件 任何人都可以免费使用、修改、发布 author:oospace email: 使用方法 1,代码前几行进参数配置 var Num=Number() //总条数(必填) var index = Number(); //当前页(必填) var pageNum=Number...
javascript分页代码实例分享(js分页)
01-19
调用： 代码如下:var pageChange = function (index)... } 实现： 代码如下:pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) { var theOpt = { barSize: 5, //分页条显示的页码数
纯js分页(ajax获取数据)
10-14
此工具的目的是实现网页数据分页显示完全脱离服务器，单纯使用js实现，现在功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。 工具例子使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成json格式的字符串，详见例子。
纯js分页模板
08-30
纯js分页模板
纯JS分页不用任何控件，简单易懂
12-06
纯手写JS分页，第一次做分页，不用任何控件，简单易懂，尝试分享出来。
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
一个纯js写的秒杀页面
09-20
一个纯js写的秒杀页面 三个过程：秒杀倒计时 秒杀进行时 秒杀结束
纯javascript实现分页(两种方法)
01-19
 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用 这块代码写了两个稍微不同一些的分页！公共的...
纯手工编写JavaScript分页处理方法.js
最新发布
08-17
工作分享：纯手工编写JavaScript分页处理方法，亲测可用，可以直接拿来用，上代码
纯js写的分页
刘晓飞
07-21 753
var head_str = "";         $(function () {             $("#pageIndex").val(pageIndex);             head();             getData();         });         //头部         function head() {        
纯JS写的分页代码。
老张
10-07 3633
有的时候页面需要很多不同的表组成的数据，该怎么分页呢。 在查询时 ，每个表查出的数据放入一个list中，然后自己写一个bean，bean里面为你查的几张表的集合。 把查出来的list中的数据放入bean里面对应的集合里面去。   然后 页面上怎么分页呢，就需要纯js写的了。   function goPage(pno,psize){ var itable = document.ge
自定义简易JavaScript分页组件实操教程
本文档分享了一个作者自创的简单JavaScript分页组件，旨在帮助开发者在项目中轻松实现分页功能。这个组件的核心是JavaScript代码，结合HTML和CSS来构建用户界面。下面将详细介绍组件的工作原理和关键部分。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值