关于数据分页显示

为什么这样写的原因

一般来说我们进行分页显示数据时是利用上一页、下一页以及首页末页来进行请求接口然后进行局部刷新，这次分享的一个基础的功能接口实现，通过页面的点击上下按钮来进行数据的传递，或者是现在越来越多的前后端分离的实现，页面给我们提供了很好的框架来进行分页功能数据显示的实现，提供了很多分页的工具，所以这次来分享一个较为原生的分页功能提供学习。

具体实现

系统的构建我就不多说了，直接从接口处实现开始，也就是控制层来进行的操作，这次例子是以ssm框架作为基础，数据库我用的是mysql说明。（如果不熟悉框架的，可以换成底层的jdbc和servlet来实现）

首先是mybatis的sql代码书写（mysql的分页），不同的数据库对分页查询的语句有所不同，

<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);//这里是为了可以看到是哪一页
		List<Gamemer> list = gamemerService.queryByPage(Gamemer.class, sp, pageSize);
		for(Gamemer g:list ) {
			System.out.println(g);//这里是为了打印显示数据
		}
		return list;
	}

页面基础布局以及请求，利用Ajax来进行请求接口
（列表数据动态生成）

<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>

利用点击事件来进行实现：

var pp = 1;//这里注意：加载时默认设置第一页，将页码数定义成全局变量
$.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){	//这里的3不应该是写死，我们需要获取到数据的总页数，然后让当前页和总页数比较，如果大于总页数，将当前页等于最大页码数，这里只是举例说明
		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>");
			}
			}
		});
	} 

方法比较重复，可以自行封装，然后在后台判断是进行上一页还是下一页。因为前段提供的框架有分页的插件，所以很多人用了框架之后，对原生的可能一下子短路，这里提供一个参考思路的分享，对于上一页或者下一页可以利用一个事件，然后在后台进行处理操作。

说明

我自己开发也是用到的框架越来越多，所以很多原生的也可能会忘记，我会把自己忘记的，利用原生的来进行实现，提供一个参考，当然我写的东西不一定是对的，希望大家在用到框架的时候，不要忘记原生的一些重要技术点和知识，欢迎指出不足之处，谢谢观看~！