作为代码萌新的我今天尝试做了一个JSP的分页处理，如果有什么不好的地方请在评论区留下建议(#^.^#)
废话不多说，先看我做的效果图↓↓
我在查询数据的时候使用了异步AJAX，在数据绑定的时候使用的是vue，因为我感觉vue用来绑定数据更方便一点，分页插件使用的是bootsarp的插件，……..至于听别人说vue有分页的功能什么的，我是第一次使用vue，不太清楚，所以本篇文章就按我的方法进行分页吧~~
先说我用到的文件吧~~
- jar包：① gson-2.2.4.jar
② mysql-connector-java-8.0.11.jar - 资源文件：① vue.min.js
② bootstrap-paginator.js（bootstarp分页插件）
③ jquery-3.3.1.min.js
④ bootstrap.min.css
不说废话，先看前台代码
<body>
<div class="marray"><h2>世界所有国家[分页处理]</h2></div>
<div class="marray"><a href="../index.jsp">返回目录菜单</a></div>
<div class="marray" id="table">
<div class="marray" style="text-align: right;">
当前第 {{nowPage}} 页，共 {{pageCount}} 页 /
共 {{dataCount}} 条数据, 当前显示 {{nowDataSize}} 条数据
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: center;">编号</th>
<!--....为了省位置，这里的th就切掉了....-->
<th style="text-align: center;">代码</th>
</tr>
</thead>
<tbody>
<tr style="height: 60px;" v-for="item in list" >
<td style="text-align: center;vertical-align:middle;">{{item.code}}</td>
<!--....为了省位置，这里的td就切掉了....-->
<td style="text-align: center;vertical-align:middle;">{{item.code2}}</td>
</tr>
</tbody>
</table>
<div class="marray">
<!--这一行是bootstrap分页插件页面用到的代码-->
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
</div>
</div>
</body>这里用到了vue的 v-for 数据迭代，不了解可以看http://www.runoob.com/vue2/vue-loop.html
接下来就是重头戏，我的javascript代码
$(document).ready(function() {
var pages = 1;//当前页数
var datasize = 7;//每页的数据量
var PAGECOUNT = 1;//总页数
var nowDataSize = 0;
var datacount = 0;
//初始化调用一次
getData();
//声明vue绑定数据
var pagedata = new Vue({
el: '#table',
data: {
list : [],
nowDataSize : nowDataSize,
dataCount : datacount,
nowPage : pages,
pageCount : PAGECOUNT
}
});
//用于查询数据的方法
function getData() {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/SelectAllCountry2Servlet",
dataType: "json",
data: {
pages : pages,
datasize : datasize
},
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(result) {
//获得数据总数
datacount = result["datacount"][0];
//计算获得当前的数据量 当然这里这个值也可以从后台一块传来
nowDataSize = 0;//初始化这个值
for(var key in result["list"]){
nowDataSize = nowDataSize + 1;
}
//计算页面总数
PAGECOUNT = Math.ceil(datacount/datasize);
//为vue设置值
pagedata.list = result["list"];
pagedata.pageCount = PAGECOUNT;
pagedata.nowPage = pages;
pagedata.nowDataSize = nowDataSize;
pagedata.dataCount = datacount;
//添加分页按钮组
$("#pageLimit").bootstrapPaginator({
currentPage: pages,
totalPages: PAGECOUNT,
numberOfPages:10,//显示的页数
bootstrapMajorVersion:3,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},onPageClicked: function(event, originalEvent, type, page){
//选择改变事件
pages = page;
getData();
}
});
},
error: function(result) {
console.log("失败");
}
});
}
});到此，我们前台就可以向后台取值了，那么后台是怎么把值给了前台的呢，我们看一下
/*==控制器的doPost方法==*/
Map<String,List> map = new HashMap<String,List>();
List listInfo = new ArrayList();
//获得页面参数
String pages = request.getParameter("pages").toString().trim();
String datasize = request.getParameter("datasize").toString().trim();
//获得并把数据总量加到map中
int count = bizFactory.getCountryBiz().getCountryCount();
listInfo.add(count);
map.put("datacount", listInfo);
//查询城市列表
System.out.println(pages + " " + datasize);
List list = new ArrayList();
list = bizFactory.getCountryBiz()
.selectSomeCountry(Integer.valueOf(pages), Integer.valueOf(datasize));
map.put("list", list);
// 输出返回
PrintWriter out = response.getWriter();
// 调用gson的方法将对象打为Json数据格式(字符串)
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
String result = gson.toJson(map);
System.out.println(result);
out.write(result);// 注意这里向jsp输出的流，在script中的截获方法 可以看到上面有两次方法调用，
第一次是 getCountryCount()，这个方法是我自己写的用于获取该数据表中共有多少条数据，，dao层就不贴全部代码了，就看一下我的sql语句就可以了。
SELECT COUNT(*) FROM country
第二次是.selectSomeCountry()，这个方法就用于获取数据的，传入有两个参数（当前页码，单页显示的数据量），相信大家看出这sql语句需要两个参数了，也知道这个sql是干啥的，我直接说这两个参数是怎么通过传来的两个参数计算来的吧：参数① （ 当前页面 － 1 ）× 单页显示的数据量，参数② 单页显示的数据量。
SELECT * FROM country LIMIT ?,?
2763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
