About data paging display

The reason why it is written like this

Generally speaking, we use the previous page when we display data in pagination、The next page and the last page of the first page are used to request the interface and then perform a partial refresh,A basic functional interface implementation shared this time,Data is transferred by clicking the up and down buttons on the page,Or more and more implementations of front-end and back-end separation,The page provides us with a good framework for the realization of paging function data display,Provides a lot of pagination tools,So this time, I will share a more native paging function to provide learning.

具体实现

I will not say much about the construction of the system,Start directly with the interface implementation,That is, the operation performed by the control layer,This example isssm框架作为基础,数据库我用的是mysql说明.（If you are not familiar with the framework,Can be replaced with the bottom layerjdbc和servlet来实现）

首先是mybatis的sql代码书写（mysql的分页）,Different databases have different statements for paging queries,

<select id="queryByPage" parameterType="map" resultType="Gamemer">
			select * from gt_gamemer limit #{start},#{pageSize}
</select>

核心部分的controller

@RequestMapping("/queryByGPage")
	@ResponseBody
	public List<Gamemer> queryByGPage(String page){
		System.out.println("page:"+page);
		int sp = Integer.parseInt(page);
		int totals = gamemerService.getTotals(Gamemer.class);
		int pageSize = 6;
		int pageCounts = totals / pageSize;
		if (totals % pageSize != 0) {
			pageCounts++;
		}
		if (sp > pageCounts) {
			sp = pageCounts;
		}
		if (sp < 1) {
			sp = 1;
		}
		System.out.println("sp:"+sp);//Here is to see which page it is
		List<Gamemer> list = gamemerService.queryByPage(Gamemer.class, sp, pageSize);
		for(Gamemer g:list ) {
			System.out.println(g);//Here is to print the display data
		}
		return list;
	}

Page basic layout and request,利用Ajaxto request the interface
（List data is dynamically generated）

<div id="shopList">
	<table id="listTable" style="background-color: white;" class="table table-hover">
		<!-- 列表 -->
		</table>
		<!-- 分页 -->
		<div id="page"><nav>
		  <ul class="pagination pagination-sm">
		    <li>
		      <a href="#" aria-label="Previous" onclick="showLast()">
		        <span id="sl" aria-hidden="true">L</span>
		      </a>
		    </li>
		    <li>
		      <a href="#" aria-label="Next" onclick="showNext()">
		        <span id="sn" aria-hidden="true">N</span>
		      </a>
		    </li>
		  </ul>
		</nav></div>
	</div>

Use the click event to implement：

var pp = 1;//这里注意：The first page is set by default on load,Define the page number as a global variable
$.ajax({
			url:"Gamemer/queryByGPage",
			type:"post",
			data:"page="+pp,
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					(function(num) {
						var rows = result[num];
						var aa = rows.name.split(" ").join("");
						$("#listTable").append("<tr><td><img width='90px' src='./image/"+rows.logo+"'/></td><td><a href='"+aa+".jsp' onclick='showGame(this)'>"+rows.name+"<a/></td><td>￥"+rows.price+"</td></tr>");
					})(i);
				}
			}
		});

//分页操作
	function showLast(){
		pp = pp - 1;
		if(pp < 1){
			pp = 1;
		}
		var fuhao = $("#sl").html();
		console.log("符号："+fuhao);
		$("#listTable").html(" ");
		$.ajax({
			url:"Gamemer/queryByGPage",
			type:"post",
			data:"page="+pp,
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					var rows = result[i];
					var aa = rows.name.split(" ").join("");
					$("#listTable").append("<tr><td><img width='90px' src='./image/"+rows.logo+"'/></td><td><a href='"+aa+".jsp' onclick='showGame(this)'>"+rows.name+"<a/></td><td>￥"+rows.price+"</td></tr>");
			}
			}
		});
	} 
	 function showNext(){
		if(pp < 3){	//这里的3Shouldn't be dead written,We need to get the total number of pages of data,Then compare the current page with the total number of pages,如果大于总页数,Sets the current page to be equal to the maximum page number,这里只是举例说明
		pp = pp + 1;
		}
		console.log("page:"+pp);
		var fuhao = $("#sn").html();
		console.log("符号："+fuhao);
		$("#listTable").html(" ");
		$.ajax({
			url:"Gamemer/queryByGPage",
			type:"post",
			data:"page="+pp,
			dataType:"json",
			success:function(result){
				for(var i=0;i<result.length;i++){
					var rows = result[i];
					var aa = rows.name.split(" ").join("");
					$("#listTable").append("<tr><td><img width='90px' src='./image/"+rows.logo+"'/></td><td><a href='"+aa+".jsp' onclick='showGame(this)'>"+rows.name+"<a/></td><td>￥"+rows.price+"</td></tr>");
			}
			}
		});
	} 

The method is relatively repetitive,可以自行封装,Then judge in the background whether to go to the previous page or the next page.Because the framework provided in the previous paragraph has a paging plug-in,So many people use the framework after,Short circuit to the native possibility all at once,Here is a sharing of reference ideas,An event can be utilized for the previous or next page,Then do the processing in the background.

说明

I also use more and more frameworks for my own development,So many native ones may also be forgotten,I will forget myself,Use native to implement,提供一个参考,Of course what I wrote is not necessarily correct,I hope that when you use the framework,Don't forget some important technical points and knowledge of native,欢迎指出不足之处,谢谢观看~！