Vue.js如何实现真分页

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月30日19:37:24 评论 188 views
广告也精彩

本文主要为大家分享一篇Vue.js如何实现真分页的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。

思路:

前端在初始化过程中,第一步先请求总的条数,然后,再请求第一页数据,然后根据点击翻页事件根据请求页码用ajax(axios和qs)去后台取得数据。

过程:

页码配置项:

pagerData:{
data:[],
page:{
//分页数
arrPageSize:[10,20,30,40],
//分页大小
pageSize:10,
//总分页数
pageCount:1,
//当前页面
pageCurrent:1,
//总数
totalCount:80
}
},

服务Impl:

	@Override
public List<A> getPageList(int startpage, int endpage) throws IOException {
// TODO Auto-generated method stub
init();
List<A> list = aMapper.selectByPage(startpage,endpage,null);
return list;
}

@Override
public Integer getCount() throws IOException {
// TODO Auto-generated method stub
init();
Integer count = (int) aMapper.countByExample(null);
return count;
}

1请求总数

vue.js(JavaScript)代码:
created(){
//请求总页数
this.$axios.post("http://localhost:8088/Web/ListServlet",
{params:{
init:true
}}
,
{
headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
}
)
.then(res=>{
console.log(JSON.stringify(res.data));
var object = eval(res.data);
var totalNum = object["count"];
console.log("totalNum:" + totalNum);
this.pagerData.page.totalCount = totalNum;
});}
后台代码(Java):
String queryString = readRequest(request);

JSONObject object = null;
object = JSONObject.fromObject(queryString);
JSONObject params = (JSONObject) object.get("params");
//判断是是初始化过程
if((params.getString("init")).equals("true")) {
Integer count = service.getCount();
PrintWriter out = response.getWriter();
JSONObject result = new JSONObject();
result.put("count", count);
logger.info(result.toString());
out.write(result.toString());
out.close();
return;
}
logger.info(params.get("startpage"));
logger.info(params.get("endpage"));
//判断不是初始化过程
if((params.getString("init")).equals("false")) {
PrintWriter out = response.getWriter();
List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),
Integer.parseInt((params.getString("endpage"))));
JSONArray array = JSONArray.fromObject(list);
out.write(array.toString());
out.close();
return;
}
public String readRequest(HttpServletRequest request) throws IOException {
BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStream(),"UTF-8"));
String temp = "";
String s = "";
while((temp = reader.readLine()) != null)
{
s = s + temp;
}
return s;
}

2请求首页和后续页码

vue.js(JavaScript)代码:
//请求首页 1-10
this.$axios.post("http://localhost:8088/Web/ListServlet",

{params:{
init:false,
startpage:1,
endpage:10
}}
,
{
headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
}
)
.then(res=>{
console.log(JSON.stringify(res.data));
var object = eval(res.data);
var totalNum = object["count"];
console.log("totalNum:" + totalNum);
for(var i = 0; i < res.data.length; i++){
//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = i+1;
totalNum ++;
if(i<=10){ //初始化获取数据的过程中,将前10个默认加入分页data
this.pagerData.data.push(object);
}
}
//this.pagerData.page.totalCount = totalNum;
});
this.loading = false;


}
翻页(change):
this.$axios.post('http://localhost:8088/Web/ListServlet',
{params:{
init:false,
startpage:((curpage-1)*this.pagerData.page.pageSize +1),
endpage:curpage*this.pagerData.page.pageSize
}},
{
headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}
}
).then(res=>{
console.log(JSON.stringify(res.data));
var object = eval(res.data);
for(var i = 0; i < res.data.length; i++){
//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = (curpage-1)*this.pagerData.page.pageSize +1 + i;
if(i<=this.pagerData.page.pageSize){
this.pagerData.data.push(object);
}
}
//this.pagerData.page.totalCount = totalNum;
})
后台代码(Java):
//判断不是初始化过程
if((params.getString("init")).equals("false")) {
PrintWriter out = response.getWriter();
List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),
Integer.parseInt((params.getString("endpage"))));
JSONArray array = JSONArray.fromObject(list);
//logger.info(array.get(1).toString());
out.write(array.toString());
out.close();
return;
}

额外:

可添加配置:pageSize,从前台传入后台,修改分页大小

example,条件查询,可在params里配置,用mybatis example配置查询

总结:

这是一个比较原生的真分页方法,如果想要实现更加复杂的分页,需要使用相关分页插件。

以上就是Vue.js如何实现真分页的详细内容,更多请关注php教程其它相关文章!

企鹅博客
  • 本文由 发表于 2019年9月30日19:37:24
  • 转载请务必保留本文链接:https://www.qieseo.com/397690.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...

发表评论