vue分页组件

Vue.component("wf-pagination", {
    template: ‘\
        <div class="mvc-grid-pager">            <ul class="pagination">                <li v-bind:class="currentPage<=1?\‘disabled\‘:\‘\‘" v-on:click="GoPage(1)"><span>&laquo;</span></li>                <li v-bind:class="currentPage<=1?\‘disabled\‘:\‘\‘" v-on:click="GoPage(currentPage-1)"><span>&lsaquo;</span></li>                <li v-for="Page in Pages" v-bind:class="Page == currentPage?\‘active\‘:\‘\‘" v-on:click="GoPage(Page)"><span>{{Page}}</span></li>                <li v-bind:class="currentPage>=totalPages?\‘disabled\‘:\‘\‘" v-on:click="GoPage(currentPage+1)"><span>&rsaquo;</span></li>                <li v-bind:class="currentPage>=totalPages?\‘disabled\‘:\‘\‘" v-on:click="GoPage(totalPages)"><span>&raquo;</span></li>            </ul>            <div class="rows-per-page">                <select class="mvc-grid-pager-rows" v-model="pageSize" v-on:change="handleSizeChange()">                    <option v-for="item in pageSizes" :value="item">{{item}}</option>                </select>                条每页，共{{totalPages}} 页，当前显示{{fromRow}}-{{toRow}}条，共{{total}} 条            </div>        </div>        ‘,
    props: {
        total: {
            type: Number,
            default: 0,
            desc: ‘记录总数‘
        },
        currentPage: {
            type: Number,
            default: 1,
            desc: ‘当前页‘
        },
        pageSize: {
            type: Number,
            default: 20,
            desc: ‘当前页大小‘
        },
        pageSizes: {
            type: Array,
            default: [10, 20, 50, 100],
            desc: ‘页大小数组‘
        }
    },
    data: function () {
        return {
            totalPages: 0,
            fromRow: 0,
            toRow: 0,
            PagesToDisplay: 10
        }
    },
    computed: {
        Pages: function () {
            this.totalPages = this.GetTotalPages();
            var firstDisplayPage = this.GetFirstDisplayPage();
            var pages = [];
            for (var page = firstDisplayPage; page <= this.totalPages && page < firstDisplayPage + this.PagesToDisplay; page++) {
                pages.push(page);
            }
            this.fromRow = (this.currentPage - 1) * this.pageSize + 1;
            var _toRow = this.fromRow - 1 + this.pageSize;
            this.toRow = _toRow > this.total ? this.total : _toRow;
            return pages;
        }
    },
    methods: {
        GetTotalPages: function () {
            if (this.total == 0)
                return 0;

            if (this.pageSize == 0)
                return 1;

            return Math.ceil(this.total / this.pageSize);
        },
        GetFirstDisplayPage: function () {
            var middlePage = this.PagesToDisplay / 2 + this.PagesToDisplay % 2;
            if (this.currentPage < middlePage)
                return 1;

            if (this.totalPages < this.currentPage + this.PagesToDisplay - middlePage)
                return Math.max(this.totalPages - this.PagesToDisplay + 1, 1);

            return this.currentPage - middlePage + 1;
        },
        GoPage: function (page) {
            if (page < 1 || page > this.totalPages) return;
            this.$emit(‘current-change‘, page);
        },
        handleSizeChange: function () {
            this.$emit(‘size-change‘, this.pageSize);
        }
    },
})

<wf-pagination :page-sizes="[20, 50, 80, 120, 200]"
                       :page-size="RowsPerPage"
                       :total="TotalRows"
                       :current-page="currentPage"
                       @@size-change="handleSizeChange"
                       @@current-change="handleCurrentChange">
</wf-pagination>

var A = new Vue({
    el: "#A",
    data: {
        yearOption: [{ Title: "2020", Value: "2020" }
        dataDetails: [],
        yearVal: "",
        TotalRows: 0,
        currentPage: 1,
        RowsPerPage: 20,
    },
    methods: {
        handleSizeChange: function (size) {
            this.RowsPerPage = size;
            this.GetData();
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.GetData();
        },
        GetData: function () {
            var _this = this;
            $.ajax({
                type: "post",
                url: url,
                data: {
                    year: this.yearVal,
                    page: this.currentPage,
                    pageSize: this.RowsPerPage,
                },
                async: false,
                success: function (data) {
                    _this.dataDetails = data.Items;
                    _this.TotalRows = data.MaxSize;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var e = errorThrown.toString();
                    console.log(e);
                }
            })
        },
        YearValChange: function () {
            this.currentPage = 1;
            this.GetData();
        },
        Model: function () {
        },
    },
    mounted: function () {
    },
});

    public class ListView
    {
        public int MaxSize { get; set; }
        public int Page { get; set; }
        public int PageSize { get; set; }
        public object Items { get; set; }
    }

public ListView GetList(Request request, int page, int pageSize)
{
    ListView _result = new ListView();
    List<AView> result = null;
     try
     {
            int MaxSize;
            result = 查询;
            MaxSize = result.Count();

            //分页
            result = result.Skip((page - 1) * pageSize).Take(pageSize).ToList();

            _result.MaxSize = MaxSize;
            _result.Items = result;
     }
     catch (Exception e)
     {
            _logger.Log(e.Message);
     }
     return _result;
}