为什么这样写的原因
一般来说我们进行分页显示数据时是利用上一页、下一页以及首页末页来进行请求接口然后进行局部刷新,这次分享的一个基础的功能接口实现,通过页面的点击上下按钮来进行数据的传递,或者是现在越来越多的前后端分离的实现,页面给我们提供了很好的框架来进行分页功能数据显示的实现,提供了很多分页的工具,所以这次来分享一个较为原生的分页功能提供学习。
具体实现
系统的构建我就不多说了,直接从接口处实现开始,也就是控制层来进行的操作,这次例子是以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>");
}
}
});
}
方法比较重复,可以自行封装,然后在后台判断是进行上一页还是下一页。因为前段提供的框架有分页的插件,所以很多人用了框架之后,对原生的可能一下子短路,这里提供一个参考思路的分享,对于上一页或者下一页可以利用一个事件,然后在后台进行处理操作。
说明
我自己开发也是用到的框架越来越多,所以很多原生的也可能会忘记,我会把自己忘记的,利用原生的来进行实现,提供一个参考,当然我写的东西不一定是对的,希望大家在用到框架的时候,不要忘记原生的一些重要技术点和知识,欢迎指出不足之处,谢谢观看~!