多平台统一管理软件接口,如何实现多平台统一管理软件接口
288
2023-04-18
Vue Cli与BootStrap结合实现表格分页功能
1、首先需要在vue-cli项目中配置bootstrap,jquery
2、 然后新建vue文件,如index.vue,index.vue内容如下:
3、配置路由即可运行实现。
表格
时间 点击数 点击数
<td>{{item.count}}
首页
上一页
{{item}}
...
{{item}}
...
{{item}}
下一页
尾页
{{pageCurrent}}/{{pageCount}}
export default {
data(){
return{
//为第一页或者最后一页时,首页,尾页不能点击
fDisabled:false,
lDisabled:false,
//总项目数
totalCount: 200,
//分页数
pageCount: 20,
//当前页面
pageCurrent: 1,
//分页大小
pagesize: 10,
//显示分页按钮数
showPages: 11,
//开始显示的分页按钮
showPagesStart: 1,
//结束显示的分页按钮
showPageEnd: 100,
//分页数据
arrayData: []
}
},
methods:{
showPage(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 = [];
var time=new Date();
for (var i = 0; i < this.pagesize; i++) {
newPageInfo[newPageInfo.length] = {
timestamp: time,
count: (i + (pageIndex - 1) * 20)
};
}
this.pageCurrent = pageIndex;
this.arrayData = newPageInfo;
//如果当前页首页或者尾页,则上一页首页就不能点击,下一页尾页就不能点击
if(this.pageCurrent===1){
this.fDisabled=true;
}else if(this.pageCurrent===this.pageCount){
this.lDisabled=true;
}else{
this.fDisabled=false;
this.lDisabled=false;
}
//计算分页按钮数据
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;
}
}
console.log("showPagesStart:" + this.showPagesStart + ",showPageEnd:" + this.showPageEnd + ",pageIndex:" + pageIndex);
}
}
},
mounted(){
this.showPage(this.pageCurrent, null, true);
},
computed:{
}
}
总结
以上所述是给大家介绍的Vue Cli与BootStrap结合实现表格分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~