bootstrap3 商品列表_vue2.0与bootstrap3实现列表分页效果

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^

使用vue2.0与bootstrap3进行简单列表分页

#名称操作

{{item.id}}{{item.name}}

编辑

删除

共{{pageData.total}}条，当前显示第

{{pageData.itemStart}}

{{pageData.itemStart}}-{{pageData.itemEnd}}

条

• 首页

• 首页

• 上一页

• 上一页

• ...

• {{pageItem}}

• {{pageItem}}

• ...

• 下一页

• 下一页

• 末页

• 末页

• Go

function getData($page,$pageSize){//获取数据，可使用各种语言替换^_^

var $data = [];

for (var $i=($page-1)*$pageSize+1; $i <=$page*$pageSize ; $i++) {

$data.push( {

id:$i,

name:'name'+$i

});

}

var $returnData = {'data':$data,'total':103};

return $returnData;

}

var vm = new Vue({

el: '#table',

data: {

listData:[],

page: 1,//当前页码

pageSize: 10,//每页条数

total:0,//总数

pageData: {

curPage: 1,

pageSize: 10,

total: 0,

totalPage: 0,

pageIndex: [],

itemStart: 0,

itemEnd: 0

}

},

methods:{

listItems: function () {//列出需要的数据

var returnData =getData(this.page,this.pageSize);

this.listData = returnData.data;

this.total=returnData['total'];

this.setPageList(this.total, this.page, this.pageSize);

},

editItem:function ($id) {//编辑操作在这儿哟

alert('编辑第'+$id+'条数据！');

},

deleteItem:function ($id) {//这里可以删除数据

alert('删除第'+$id+'条数据！');

},

setPageList: function (total, page, pageSize) {

total = parseInt(total);

var curPage = parseInt(page);

pageSize = parseInt(pageSize);

var totalPage = Math.ceil(total / pageSize);

var itemStart = (curPage - 1) * pageSize + 1;

if (curPage == totalPage) {

itemEnd = total;

} else {

itemEnd = curPage * pageSize;

}

var pageIndex = [];

if (curPage >= 1 && curPage <= totalPage) {

if (totalPage < 5) {//5页以内

for (var $i = 1; $i <= totalPage; $i++) {

pageIndex.push($i);

}

} else {//大于5页

if (curPage == 1) {

pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4];

} else if (curPage == 2) {

pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3];

} else if (curPage == totalPage - 1) {

pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage];

} else if (curPage == totalPage) {

pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage];

} else {

pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2];

}

}

}

this.pageData.curPage = curPage;

this.pageData.pageSize = pageSize;

this.pageData.total = total;

this.pageData.totalPage = totalPage;

this.pageData.pageIndex = pageIndex;

this.pageData.itemStart = itemStart;

this.pageData.itemEnd = itemEnd;

},

changeCurPage: function (page, pageSize) {//换页

this.page = page;

this.pageSize = pageSize;

this.listItems();

},

goPage: function (pageSize, totalPage) {//跳转页

var pageIndex = this.$refs.goPage.value;

if (pageIndex <= 0) {

pageIndex = 1;

this.$refs.goPage.value = 1;

} else if (pageIndex >= totalPage) {

pageIndex = totalPage;

this.$refs.goPage.value = totalPage;

}

this.changeCurPage(pageIndex, pageSize);

}

}

});

window.onload = function(){

console.log('Hello World!');

vm.listItems();

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。