問題:
之前實現假分頁,現在來實現簡單的真分頁,原理見 Mybatis Example對Oracle數據庫的分頁查詢
思路:
前端在初始化過程中,第一步先請求總的條數,然後,再請求第一頁數據,然後根據點擊翻頁事件根據請求頁碼用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配置查詢
總結:
這是一個比較原生的真分頁方法,如果想要實現更加複雜的分頁,需要使用相關分頁插件。