vue分页组件

• Z时代
• 2024-01-10
• 分类：综合

js插件（另存为js插件）： 

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);
        }
    },
})

View Code

html页面使用（记得引用上述js插件）：

<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>

View Code

js:

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 () {
    },
});

View Code

添加一个类 作为_reslut:

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

View Code

Services:     

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;
}                

View Code

以上是 vue分页组件 的全部内容， 来源链接： utcz.com/z/376766.html