vue 分页

@{
    Layout = null;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<style>
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .table {
        display: table;
        border-collapse: collapse;
        border: 1px solid #ccc;
    }

    .table-caption {
        display: table-caption;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

    .table-column-group {
        display: table-column-group;
    }

    .table-column {
        display: table-column;
        width: 100px;
    }

    .table-row-group {
        display: table-row-group;
    }

    .table-row {
        display: table-row;
        line-height: 30px;
    }

    .table-row-group .table-row:hover, .table-footer-group .table-row:hover {
        background: #f6f6f6;
    }

    .table-cell {
        display: table-cell;
        padding: 0 5px;
        border: 1px solid #ccc;
    }

    .table-header-group {
        display: table-header-group;
        background: #eee;
        font-weight: bold;
    }

    .table-footer-group {
        display: table-footer-group;
    }
</style>

<script>
    var data = {
        totalPages: 1, //总页数
        cur: 1,//当前页码
        pageSize: 5,//每页显示的数量
        rows: [],//后台的数据
        weburl: "/Home/GetDatas",//请求的方法
        keys: ""//查询关键字
    };

    $(function () {
        var app = new Vue({
            el: "#app",
            data: data,
            mounted: function () {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    data: { key: this.keys, page: this.cur, pageSize: this.pageSize },
                    url: this.weburl,
                    success: function (result) {
                        //result因返回的值不同做适当的处理，只要给 data.rows data.totalPages 赋值就可以
                        if (result.List != null) {
                            data.rows = result.List;
                            data.totalPages = Math.ceil(result.TotalCount / data.pageSize);
                        }
                    }
                });
            },

            methods: {
                btnClick: function (index) {
                    if (index != this.cur) {
                        this.cur = index;
                        $.ajax({
                            type: "post",
                            dataType: "json",
                            data: { key: this.keys, page: index, pageSize: data.pageSize },
                            url: this.weburl,
                            success: function (result) {
                                if (result.List != null) {
                                    data.rows = result.List;
                                    data.totalPages = Math.ceil(result.TotalCount / data.pageSize);
                                }
                            }
                        });
                    }
                },

                upPage: function () {
                    this.cur--;
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: { key: this.keys, page: this.cur, pageSize: data.pageSize },
                        url: this.weburl,
                        success: function (result) {
                            if (result.List != null) {
                                data.rows = result.List;
                                data.totalPages = Math.ceil(result.TotalCount / data.pageSize);
                            }
                        }
                    });
                },

                downPage: function () {
                    this.cur++;
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: { key: this.keys, page: this.cur, pageSize: data.pageSize },
                        url: this.weburl,
                        success: function (result) {
                            if (result.List != null) {
                                data.rows = result.List;
                                data.totalPages = Math.ceil(result.TotalCount / data.pageSize);
                            }
                        }
                    });
                }
            },

            watch: {
                cur: function (oldValue, newValue) {
                }
            },

            computed: {
                indexs: function () {
                    var left = 1
                    var right = this.totalPages
                    var ar = []
                    if (this.totalPages >= 6) {
                        if (this.cur > 2 && this.cur < this.totalPages - 2) {
                            left = this.cur - 2
                            right = this.cur + 2
                        } else {
                            if (this.cur <= 3) {
                                left = 1
                                right = 5
                            } else {
                                right = this.totalPages
                                left = this.totalPages - 4
                            }
                        }
                    }
                    while (left <= right) {
                        ar.push(left)
                        left++
                    }
                    return ar
                },
                showLast: function () {
                    return this.cur !== this.totalPages
                },
                showFirst: function () {
                    return this.cur !== 1;
                }
            }
        })
    })
</script>
<div id="app">
    <input type="button" class="btn btn-danger" name="name" value="dfd" />
    <div class="table-header-group">
        <ul class="table-row">
            <li class="table-cell">aa</li>
            <li class="table-cell">bb</li>
            <li class="table-cell">cc</li>
        </ul>
    </div>
    <div class="table-row-group" v-for="row in rows">
        <ul class="table-row">
            <li class="table-cell">{{row.aa}}</li>
            <li class="table-cell">{{row.bb}}</li>
            <li class="table-cell">{{row.cc}}</li>
        </ul>
    </div>
    <ul class="pagination">
        <li v-if="this.cur !== 1"><a v-on:click="upPage()">上一页</a></li>
        <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
            <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="this.cur !== this.totalPages"><a v-on:click="downPage()">下一页</a></li>
        <li><a>共<i>{{totalPages}}</i>页</a></li>
    </ul>
</div>

 

 //两个模型对象

 public class DataModel
    {
        public IList<DataItem> List { get; set; }
        public int TotalCount { get; set; }
    }

    public class DataItem
    {
        public string cc { get; set; }
        public string aa { get; set; }
        public string bb { get; set; }
    }

//后台ajax请求的方法 

 [HttpPost]
        public ActionResult GetDatas(string key, int page = 1, int pageSize = 5)
        {
            IList<DataItem> lst = new List<DataItem>();
            for (int i = 0; i < 50; i++)
            {
                DataItem dm = new DataItem();
                dm.aa = "aa" + i.ToString();
                dm.bb = "bb" + i.ToString();
                dm.cc = "cc" + i.ToString();
                lst.Add(dm);
            }

            DataModel model = new DataModel();
            model.List = lst.Skip((page - 1) * pageSize).Take(pageSize).ToList();
            model.TotalCount = lst.Count;
            return Json(model);
        }