最近的项目里:我引入了Vue到后端请求数据下面是分页代码
这边是通过引入文件:
<script src="./js/vue.js/vue.js"></script>
<script src="./js/vue.js/vue-resource.js"></script>
这个是Vue.js
versionLog_infos = new Vue({
el: '#versionLog_infos',
data: {
parentMessage: 'Parent',
items: [],
pages:[],
nextTo:[],
backTo:[]
},
methods:{
// 查询便利
searchData:function (page,rows) {
// 获取提交的页码
var total = $(".pagination li").attr('class',"title"); // 清空属性
var doc = $(".pagination li[title="+page+"]").attr('class','active'); // 加选中的属性
if(page == 1){
$("#left_to").attr('class',"disabled");
}else{
$("#left_to").attr('class',"title");
}
// 表单提交的数据
var from_tb = $('form').serializeArray();
from_tb['5'] = {name:'page',value:page};
from_tb['6'] = {name:'rows',value:rows};
this.$http.post('./organizational/versionLogNew/versionData.php',from_tb,{emulateJSON:true}).then(function(res){
actionLog_infos.backTo['0'] = {'pages':page-1,'rows':5}; // 上翻页
actionLog_infos.nextTo['0'] = {'pages':page+1,'rows':5}; // 下翻页
if(0< parseInt(res.body.total) < 5){
versionLog_infos.pages['0'] = {'pages':1,'rows':5};
}
if(parseInt(res.body.total) > 5){
for (var i = 0; i < parseInt(res.body.total)/5; i++){
if(parseInt(parseInt(res.body.total)/5)+1 == page ){
$("#right_to").attr('class',"disabled");
}else{
$("#right_to").attr('class',"title");
}
versionLog_infos.pages[i] = {'pages':i+1,'rows':5};
}
}else{
}
console.log(parseInt(res.body.total));
versionLog_infos.items = res.body["rows"];
});
},
// 增加版本信息
addVersion:function () {
console.log(123);
}
}
});html文件
<nav>
<ul class="pagination">
<li id="left_to" class="disabled" v-on:click="searchData(backs.pages,backs.rows)"
v-for="backs in backTo">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-bind:title="page.pages" @click="searchData(page.pages,page.rows)" v-for="page in pages">
<a href="#page.pages">{{page.pages}}<span
class="sr-only"></span></a>
</li>
<li id="right_to">
<a href="#" aria-label="Previous"
@click="searchData(nexts.pages,nexts.rows)" v-for="nexts in nextTo">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>实现的效果就是这样 :
当在第一页时选中第一页且左选择按钮禁用,当在最后一页时右选择按钮禁用并选中最后一个分页,其他都是按照分页编写 实例上使用 Bootstrap 框架
