寫之前先抱怨幾句。本來一心一意做.net開發的，漸漸地成了只做前端。最近項目基本都用java做后臺，我們這些.net的就成了前端，不是用wpf做界面，就是用html寫web頁面。

深知自己前端技術不足，以前雖說用asp.net前后臺都做，但是，對于前端都是用現成的js庫和頁面模板，對于vue.js等框架基本沒有接觸過。

只怪自己不會寫java，最近做一個項目，負責前端，后臺傳來數據不分頁，前端收到所有數據后自己分頁。我盡是無語。

正好最近在看vue.js。這個頁面就用它來實現吧。順便總結下。

效果圖：

語法：

數據綁定 {{...}}或者v-model

{{dataItem.id}}

事件綁定 v-on

ID

循環 v-for

{{item}}

判斷 v-if

首頁

過濾器 Vue.filter

//定義

Vue.filter( 'name' , function(value) {

return value * .5 ;

});

//使用

{{dataItem.age | name}}

排序orderBy

{{dataItem.id}}{{dataItem.name}}{{dataItem.age}}

html

數據

ID姓名年齡

{{dataItem.id}}	{{dataItem.name}}	{{dataItem.age}}

分頁

{{item}}

首頁

上一頁

{{item}}

...

{{item}}

...

{{item}}

下一頁

尾頁

{{pageCurrent}}/{{pageCount}}

javascript

//只能輸入正整數過濾器

Vue.filter('onlyNumeric', {

// model -> view

// 在更新 `` 元素之前格式化值

read: function (val) {

return val;

},

// view -> model

// 在寫回數據之前格式化值

write: function (val, oldVal) {

var number = +val.replace(/[^\d]/g, '')

return isNaN(number) ? 1 : parseFloat(number.toFixed(2))

}

})

//模擬獲取數據

var getData=function(){

var result = [];

for (var i = 0; i < 500; i++) {

result[i] ={name:'test'+i,id:i,age:(Math.random()*100).toFixed()};

}

return result;

}

var vue = new Vue({

el: "#test",

//加載完成后執行

ready:function(){

this.arrayDataAll = getData();

this.totalCount = this.arrayDataAll.length;

this.showPage(this.pageCurrent, null, true);

},

data: {

//總項目數

totalCount: 200,

//分頁數

arrPageSize:[10,20,30,40],

//當前分頁數

pageCount: 20,

//當前頁面

pageCurrent: 1,

//分頁大小

pagesize: 10,

//顯示分頁按鈕數

showPages: 11,

//開始顯示的分頁按鈕

showPagesStart: 1,

//結束顯示的分頁按鈕

showPageEnd: 100,

//所有數據

arrayDataAll:[],

//分頁數據

arrayData: [],

//排序字段

sortparam:"",

//排序方式

sorttype:1,

},

methods: {

//分頁方法

showPage: function (pageIndex, $event, forceRefresh) {

if (pageIndex > 0) {

if (pageIndex > this.pageCount) {

pageIndex = this.pageCount;

}

//判斷數據是否需要更新

var currentPageCount = Math.ceil(this.totalCount / this.pagesize);

if (currentPageCount != this.pageCount) {

pageIndex = 1;

this.pageCount = currentPageCount;

}

else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {

console.log("not refresh");

return;

}

//處理分頁點中樣式

var buttons = $("#pager").find("span");

for (var i = 0; i < buttons.length; i++) {

if (buttons.eq(i).html() != pageIndex) {

buttons.eq(i).removeClass("active");

}

else {

buttons.eq(i).addClass("active");

}

}

//從所有數據中取分頁數據

var newPageInfo = [];

for (var i = 0; i < this.pagesize; i++) {

var index =i+(pageIndex-1)*this.pagesize;

if(index>this.totalCount-1)break;

newPageInfo[newPageInfo.length] = this.arrayDataAll[index];

}

this.pageCurrent = pageIndex;

this.arrayData = newPageInfo;

//計算分頁按鈕數據

if (this.pageCount > this.showPages) {

if (pageIndex <= (this.showPages - 1) / 2) {

this.showPagesStart = 1;

this.showPageEnd = this.showPages - 1;

console.log("showPage1")

}

else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {

this.showPagesStart = this.pageCount - this.showPages + 2;

this.showPageEnd = this.pageCount;

console.log("showPage2")

}

else {

console.log("showPage3")

this.showPagesStart = pageIndex - (this.showPages - 3) / 2;

this.showPageEnd = pageIndex + (this.showPages - 3) / 2;

}

}

}

//排序

},sortBy: function (sortparam) {

this.sortparam = sortparam;

this.sorttype = this.sorttype == -1 ? 1 : -1;

}

}

});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html vue分页,Vue.js bootstrap前端实现分页和排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。