拿vue做示例
首先定义data
data() { return { tableData: [], // 当前页的数据,用于给表格展示用的 tableDataAll: [], // 需要拿来分页的总数据 pagination: { totalRows: 0, //总条数 pageSize: 10, //每页显示条数 pageNumber: 1 } } }
定义methods
methods: { currentChange(val) { //页码改变 this.pagination.pageNumber = val; this.dataPagination(this.tableDataAll); }, sizeChange(val) { //切换每页显示条数 this.pagination.pageSize = val; this.dataPagination(this.tableDataAll); }, // 数据分页 dataPagination(dataList) { if (!dataList || dataList.length <=0) { dataList = []; this.tableData = []; } if (dataList.length <= this.maxUsePage) { this.tableData = dataList; return; } let pageNo = this.pagination.pageNumber; let pageSize = this.pagination.pageSize; var offset = (pageNo - 1) * pageSize; this.pagination.totalRows = dataList.length; this.tableData = (offset + pageSize >= dataList.length) ? dataList.slice(offset, dataList.length) : dataList.slice(offset, offset + pageSize); } }, mounted: function() { this.$nextTick(function () { // 初始化渲染 this.pagination.pageNumber = 1 // 得到总数据tableDataAll进行分页 this.dataPagination(this.tableDataAll); }) }