vue使用bootatrap简单分页

html:

    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
      .table-striped .delbtn {
        cursor: pointer;
        background: #428bca;
        border: none;
    }
     .table-striped .delbtn[disabled]{
      cursor: default;
        background: #999;
        border: none;
     }
    </style>    


<div id="shppingcart">
        <!-- 头部 -->
        <div class="page-header">
            <div>
              <h1 style="display: inline-block;">{{name}}的购物清单列表</h1>
                <span>清单总数
                  <span class="label label-warning" >{{totalCount}}</span>
                </span>
                <span>未采购数
                  <span class="label label-success">{{count}}</span>
                </span>
            </div>
        </div>
        <!-- 内容 -->
        <div class="panel">
            <div class="input-group">
              <input class="form-control" v-model="text"/>
              <span class="input-group-btn">
                <button class="btn btn-default" @click="addItem(text)">添加</button>
              </span>
            </div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>清单名称</th>
                  <th>已采购</th>
                  <th>状态</th>
                  <th>删除</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in items">
                  <td>{{(pageCurrent-1)*3+index+1}}</td>
                  <td>{{item.name}}</td>
                  <td><input type="checkbox" v-model='item.state' v-on:change="changelist(item.state,index)"/></td>
                  <td>{{item.state | stateFilter }}</td>
                  <td><button class="badge delbtn" v-on:click="del(index)" :disabled="!item.state">删除</button></td>
                </tr>
              </tbody>
            </table>
        </div>
        <div class="pager" id="pager">
            <span v-for="item in pageCount+1">
                <span v-if="item==1" class="btn btn-default" v-on:click="getList(1,$event)" :class="{'disabled':fDisabled}">
                    首页
                </span>
                <span v-if="item==1" class="btn btn-default" v-on:click="pageCurrent==1?null:getList(pageCurrent-1,$event)" :class="{'disabled':fDisabled}">
                    上一页
                </span>
                <span v-if="item==1" class="btn btn-default" v-on:click="getList(item,$event)">
                    {{item}}
                </span>
                <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">
                    ...
                </span>
                <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="getList(item,$event)">
                    {{item}}
                </span>
                <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">
                    ...
                </span>
                <span v-if="item==pageCount" class="btn btn-default" v-on:click="getList(item,$event)">
                    {{item}}
                </span>
                <span v-if="item==pageCount" class="btn btn-default" v-on:click="pageCount==pageCurrent?null:getList(pageCurrent+1,$event)" :class="{'disabled':lDisabled}">
                    下一页
                </span>
                <span v-if="item==pageCount" class="btn btn-default" v-on:click="getList(pageCount,$event)" :class="{'disabled':lDisabled}">
                    尾页
                </span>
            </span>
            <span>{{pageCurrent}}/{{pageCount}}</span>
        </div>


    </div>

js:

window.onload=function(){
	new Vue({
		el:"#shppingcart",
		data:{
       //为第一页或者最后一页时，首页，尾页不能点击
       fDisabled:false,
       lDisabled:false,
          //总项目数
        totalCount: 200,
        //分页数
        pageCount: 20,
        //当前页面
        pageCurrent: 1,
        //分页大小
        pagesize: 10,
        //显示分页按钮数
        showPages: 8,
        //开始显示的分页按钮
        showPagesStart: 1,
        //结束显示的分页按钮
        showPageEnd: 100,
			name:'测试分页',
			items:[],  //通过getList()调接口获取
			// items:[
			//       {action:'外套',state:false},
            //       {action:'保暖衣',state:false},
            //       {action:'夹克男装',state:true},
            //       {action:'化装品',state:false}
			//      ],
			text:'' ,
      count:0,
		},
		mounted:function(){
			this.getList();
			//this.changelist();

		},
		methods:{
			getList:function(pageIndex){
				this.pageCurrent = pageIndex || this.pageCurrent;
                axios({
                    method:'post',    //请求方式
                    url:'http://localhost:3000/list/get' ,       //接口
					data:{
						cur:this.pageCurrent
					}
                }).then((response)=>{     //成功
                    //console.log(response);
                    var res = response.data;
                    if(res.code == '200'){
                      this.items = res.arr; //当前数据
                      this.pageCount = res.total;  //总页数
                      this.totalCount = res.length; //总数量
                      this.count = this.items.filter(function(x) {return !x.state}).length;


                      //计算分页按钮数据
                        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);




					}
                }).catch((error)=>{      //error
                    console.log(error);
                });
				// axios.get('http://localhost:3000/list/get',{params:{name:'abc',age:20}})
				// .then((response)=>{     //成功
                //     console.log(response);
				// 	var res = response.data;
				// 	if(res.code == '200'){
				// 		 this.items = res.arr; //当前数据
				// 		 this.pagenum = res.total;  //总页数
				// 		 this.length = res.length; //总数量
				// 		 this.count = this.items.filter(function(x) {return !x.state}).length;
				// 	}
                // }).catch((error)=>{      //error
                //     console.log(error);
                // });
            },
		},
		filters:{  //过滤器
            stateFilter:function(type){
                switch(type){
                    case true:
                        return '已采购';
                    case false:
                        return '未采购';
                    default:
                        return '未采购';
                }
            }
        }
	})
}

node后台分页：

var connect = require('connect');  //创建连接
var bodyParser = require('body-parser');   //body解析
var serveStatic = require('serve-static');   //目录访问（静态文件访问）
var arr=[
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
	{name:'手机0',state:false},
	{name:'手机1',state:false},
	{name:'电脑2',state:false},
	{name:'平板3',state:true},
	{name:'包包4',state:false},
	{name:'衣服5',state:false},
	{name:'玩具6',state:true},
];
var size = 3;//一页10条数据
var app = connect()
    .use(bodyParser.json())   //JSON解析
    .use(bodyParser.urlencoded({extended: true}))
    .use(serveStatic(__dirname))
	//use()方法还有一个可选的路径字符串，对传入请求的URL的开始匹配。
	//use方法来维护一个中间件队列
	.use(function (req, res, next) {
		//跨域处理
		// Website you wish to allow to connect
        res.setHeader('Access-Control-Allow-Origin', '*');  //允许任何源
        // Request methods you wish to allow
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');  //允许任何方法
        // Request headers you wish to allow
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');   //允许任何类型
		res.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});    //utf-8转码
		next();  //next 方法就是一个递归调用
	})
	.use('/list/get', function(req, res, next) {
		var data = {"code":200,"msg":"success"};
		var i = req.body.cur -1; //转化页数索引

		var length = arr.length;
		var total = Math.ceil(length/size);
		var arr2 =arr.slice(i*3,i*3+3);
		data.arr =arr2;
		data.length = length;
		data.total = total;
		data.num = arr.filter(function(item){
			return item.state;
		}).length;
        res.end(JSON.stringify(data));
		next();
	})
	.use('/list/add', function(req, res, next) {
		var data = {"code":200,"msg":"success"};
		if(req.method=='PUT'){
			var obj = {};
			obj.name = req.body.name;
			obj.state = false;
			console.log(obj);
			arr.push(obj)
		}

        res.end(JSON.stringify(data));
		next();
	})
	.use('/list/del', function(req, res, next) {
		var data = {"code":200,"msg":"success"};
		if(req.method=="DELETE"){
			var index  = req.body.index ;
			var cur  = req.body.cur ;
			console.log(index,cur);
			index = (cur-1)* size + index;
			console.log(index , cur );
			arr.splice(index,1);
			console.log(arr);
		}

        res.end(JSON.stringify(data));
		next();
	})
	.use('/list/checkbox', function(req, res, next) {
		var data = {"code":200,"msg":"success"};
		if(req.method=="POST"){
			var index  = req.body.index ;
			var cur  = req.body.cur ;
			var state = req.body.state;
			index = (cur-1)* size + index;
			arr[index].state=state;
			console.log(arr);
		}

        res.end(JSON.stringify(data));
		next();
	})
    .listen(3000);
console.log('Server started on port 3000.');