效果圖
先來個(gè)效果圖损话，如果覺得丑，就不用往下看了槽唾。。光涂。庞萍。
實(shí)驗(yàn)環(huán)境：
| 名稱 | 版本號(hào) |
|---|---|
| mongodb | 3.5.3 |
| node.js | 9.1.0 |
| Vue.js | 2.5.6 |
詳細(xì)代碼
環(huán)境搭建我就不說了，直接說說思路吧忘闻。功能基本上就這些：
- 任意點(diǎn)擊某一頁
- 上一頁钝计，下一頁
- 前五頁， 后五頁
- 搜索任意頁
- 顯示總頁數(shù)
初始化
首先需要初始化從后臺(tái)拿到表中總的記錄數(shù)count，然后根據(jù)我們預(yù)先設(shè)定的page_size（每頁顯示多少條數(shù)據(jù)）私恬，來計(jì)算出總的頁數(shù)（page_count）债沮。本文中，page_size=10, 頁碼表默認(rèn)是顯示5個(gè)本鸣。
data() {
return {
all_user_data: "",
count: "",//總記錄數(shù)
page_count: "",//總頁數(shù)
page_size: 10,//每頁顯示記錄條數(shù)
page_now: 1,//當(dāng)前頁
page_num: null,//搜索頁
list: []//頁碼表
}
},
initpage() {
this.api_name = this.$route.query.api_name;
this.$http.get(this.GLOBAL.apiurl + "/api/" + this.api_name).then((response) => {
console.log(response.body.data);
this.all_user_data = response.body.data;
});
this.$http.get(this.GLOBAL.apiurl + "/api/" + this.api_name + "_count").then((response) => {
console.log(response.body.data);
this.count = response.body.data;
this.page_count = Math.ceil(this.count / this.page_size);
for (var i = 1; i <= this.page_count; i++) {
this.list[i - 1] = i;
if (i >= 5) {
break;
}
}
});
},
這里計(jì)算總頁數(shù)的時(shí)候要注意疫衩，如果最后一頁不夠10條數(shù)據(jù)，也要計(jì)算在內(nèi)
this.page_count = Math.ceil(this.count / this.page_size);
所以我們用(count/page_size)然后整個(gè)向上取整計(jì)算出總的頁數(shù)荣德。注意啊闷煤，js中''/''計(jì)算的結(jié)果不是整數(shù)，而是小數(shù)涮瞻。鲤拿。。
這里總共向后臺(tái)發(fā)了兩個(gè)請(qǐng)求署咽，一個(gè)是拿回第一頁的10條數(shù)據(jù)近顷，一個(gè)是拿到總的記錄數(shù)，初始化頁碼表宁否。來看看后臺(tái)這兩個(gè)函數(shù)
apiRoutes.get('/你自己的url', function (req, res) {
console.log("--------------------------------------------------");
let page_now = req.query.page_now;
console.log(page_now);
Student.MFindAllStudents(page_now, function (err, students) {
if (err) {
res.json({
errno: 1,
tips: "查詢所有學(xué)生操作異常"
})
}
else {
res.json({
errno: 0,
data: students
})
}
})
});
apiRoutes.get('/你自己請(qǐng)求的url', function (req, res) {
console.log("--------------------------------------------------");
Student.MCountAllStudents(function (err, count) {
if (err) {
res.json({
errno: 1,
tips: "查詢總數(shù)操作異常"
})
}
else {
res.json({
errno: 0,
data: count
})
}
})
});
exports.MFindAllStudents = function(page_now, callback){
Student.find(function(err,student){
callback(err,student);
}).limit(10).skip(page_now*10);
};
exports.MCountAllStudents = function(callback){
Student.count(function(err,count){
callback(err,count);
});
};
Student是表的映射窒升，后臺(tái)使用了mongoose模塊來做數(shù)據(jù)庫操作，在find語句后面加上
limit(10).skip(1)就代表從第一頁開始顯示家淤，每頁顯示10條數(shù)據(jù)异剥。這個(gè)就是分頁的核心了，所有的操作都是在調(diào)這個(gè)函數(shù)絮重。
好了冤寿，現(xiàn)在對(duì)應(yīng)著每一個(gè)功能來看
- 任意點(diǎn)擊某一頁
click_page: function (page_now) {
let data = {page_now: page_now - 1};
this.api_name = this.$route.query.api_name;
this.$http.get(this.GLOBAL.apiurl + "/api/" + this.api_name, {params: data}).then((response) => {
console.log(response.body.data);
this.all_user_data = response.body.data;
});
this.page_now = page_now;
},
將 當(dāng)前頁碼-1 傳到后臺(tái)，為啥減1不談了青伤，看看上面的skip機(jī)制就知道了督怜。
- 上一頁，下一頁
click_next_one: function () {
if (this.page_now * this.page_size < this.count) {
if (this.page_now === this.list[this.list.length - 1]) {
for (var i = 0; i < this.list.length; i++) {
this.list[i] += 1;
}
}
this.page_now += 1;
this.click_page(this.page_now)
} else {
alert("已到最后一頁");
}
},
click_pre_one: function () {
if (this.page_now > 1) {
if (this.page_now === this.list[0]) {
for (var i = 0; i < this.list.length; i++) {
this.list[i] -= 1;
}
}
this.page_now -= 1;
this.click_page(this.page_now)
} else {
alert("已到第一頁");
}
},
先看下一頁狠角，如果是末頁的話沒有下一頁号杠，所以先來一個(gè)過濾。然后這個(gè)循環(huán)體主要是實(shí)現(xiàn)了這么一個(gè)效果丰歌，就是當(dāng)前頁是頁碼表的最后一頁時(shí)（比如第5頁）姨蟋，下一頁之后會(huì)使頁碼表每個(gè)都后延一個(gè)數(shù)，看圖：
上一頁的情況是一樣的立帖，注意的是眼溶，不用再向后臺(tái)請(qǐng)求數(shù)據(jù)，只需要調(diào)用已經(jīng)寫好的click_page函數(shù)即可晓勇。
- 前五頁堂飞， 后五頁
click_pre_more: function () {
if (this.list[0] > 5) {
for (var i = 0; i < this.list.length; i++) {
this.list[i] -= this.list.length;
}
this.page_now -= this.list.length;
this.click_page(this.page_now);
} else {
this.click_pre_one();
}
},
click_next_more: function () {
//如果每行第一個(gè)數(shù)加9超了灌旧，意味著最后一頁會(huì)出現(xiàn)不夠的情況，那就執(zhí)行下一頁
if (this.list[0] + this.page_size-1 <= this.page_count) {
for (var i = 0; i < this.list.length; i++) {
this.list[i] += this.list.length;
}
this.page_now += this.list.length;
this.click_page(this.page_now);
} else {
this.click_next_one();
}
}
正常情況時(shí)绰筛，點(diǎn)擊后5頁會(huì)使頁碼表更新枢泰，每個(gè)延后5個(gè)位置，并且當(dāng)前頁也會(huì)延后5個(gè)位置铝噩，效果：
特殊情況衡蚂，最后不夠5頁了怎么辦，最好的應(yīng)該是薄榛，最后還剩幾頁就顯示幾頁讳窟，可以我沒找到合適的解決方案，就用了另一種方案代替：不夠5頁時(shí)就去調(diào)下一頁敞恋。效果：
那前五頁的效果跟這個(gè)是一樣的丽啡，只不過判斷條件變了以下而已，就不多說了硬猫。
- 搜索任意頁
click_page_search: function (page_num) {
if (page_num <= this.page_count && page_num > 0) {
this.click_page(page_num);
//正常情況時(shí)补箍，搜索頁碼顯示在頁碼表的首位
if (page_num + this.list.length - 1 <= this.page_count) {
for (var i = 0; i < this.list.length; i++) {
this.list[i] = page_num + i;
}
}else {
for (var i = 0; i < this.list.length; i++) {
this.list[this.list.length-1-i] = page_num - i ;
}
}//特殊情況時(shí)，搜索頁碼顯示在頁碼表的末位
} else {
alert("兄臺(tái)啸蜜，并沒有這一頁...");
}
this.page_num = "";
},
這個(gè)搜索倒是很簡(jiǎn)單坑雅，直接調(diào)click_page就行了，關(guān)鍵是你的頁碼表得跟著更新啊衬横。裹粤。。
/正常情況時(shí)蜂林，搜索頁碼顯示在頁碼表的首位（避免了第一頁的位置不在頁碼表的首位）
效果：
特殊情況遥诉，即搜索頁是最后4頁時(shí)，搜索頁碼顯示在頁碼表的末位（避免了最后不夠5頁的情況）噪叙。效果：
總結(jié)：
基本上就是這樣了矮锈，算法太差了，寫的很亂睁蕾，總是用一些很笨的方法來補(bǔ)救苞笨。。子眶。希望以后能有更好的解決方案
樣式是引用了這位前輩的帖子瀑凝，非常感謝
Html5實(shí)現(xiàn)自己的分頁加載
