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

深知自己前端技術(shù)不足，以前雖說用asp.net前后臺(tái)都做，但是，對(duì)于前端都是用現(xiàn)成的js庫(kù)和頁(yè)面模板，對(duì)于vue.js等框架基本沒有接觸過。

只怪自己不會(huì)寫java，最近做一個(gè)項(xiàng)目，負(fù)責(zé)前端，后臺(tái)傳來數(shù)據(jù)不分頁(yè)，前端收到所有數(shù)據(jù)后自己分頁(yè)。我盡是無語(yǔ)。

正好最近在看vue.js。這個(gè)頁(yè)面就用它來實(shí)現(xiàn)吧。順便總結(jié)下。

效果圖：

語(yǔ)法：

數(shù)據(jù)綁定 {{...}}或者v-model

{{dataItem.id}}

事件綁定 v-on

ID

循環(huán) v-for

{{item}}

判斷 v-if

首頁(yè)

過濾器 Vue.filter

//定義

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

return value * .5 ;

});

//使用

{{dataItem.age | name}}

排序orderBy

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

html

數(shù)據(jù)

ID姓名年齡

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

分頁(yè)

{{item}}

首頁(yè)

上一頁(yè)

{{item}}

...

{{item}}

...

{{item}}

下一頁(yè)

尾頁(yè)

{{pageCurrent}}/{{pageCount}}

javascript

//只能輸入正整數(shù)過濾器

Vue.filter('onlyNumeric', {

// model -> view

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

read: function (val) {

return val;

},

// view -> model

// 在寫回?cái)?shù)據(jù)之前格式化值

write: function (val, oldVal) {

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

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

}

})

//模擬獲取數(shù)據(jù)

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",

//加載完成后執(zhí)行

ready:function(){

this.arrayDataAll = getData();

this.totalCount = this.arrayDataAll.length;

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

},

data: {

//總項(xiàng)目數(shù)

totalCount: 200,

//分頁(yè)數(shù)

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

//當(dāng)前分頁(yè)數(shù)

pageCount: 20,

//當(dāng)前頁(yè)面

pageCurrent: 1,

//分頁(yè)大小

pagesize: 10,

//顯示分頁(yè)按鈕數(shù)

showPages: 11,

//開始顯示的分頁(yè)按鈕

showPagesStart: 1,

//結(jié)束顯示的分頁(yè)按鈕

showPageEnd: 100,

//所有數(shù)據(jù)

arrayDataAll:[],

//分頁(yè)數(shù)據(jù)

arrayData: [],

//排序字段

sortparam:"",

//排序方式

sorttype:1,

},

methods: {

//分頁(yè)方法

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

if (pageIndex > 0) {

if (pageIndex > this.pageCount) {

pageIndex = this.pageCount;

}

//判斷數(shù)據(jù)是否需要更新

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;

}

//處理分頁(yè)點(diǎn)中樣式

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");

}

}

//從所有數(shù)據(jù)中取分頁(yè)數(shù)據(jù)

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;

//計(jì)算分頁(yè)按鈕數(shù)據(jù)

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;

}

}

});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。