为什么这样写的原因

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

具体实现

系统的构建我就不多说了，直接从接口处实现开始，也就是控制层来进行的操作，这次例子是以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")@ResponseBodypublic 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>");}}});} 

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

说明

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