First: From a practical point of view, it must be the real pages that have realistic value, but fake pages are also important. True paging means that each time the front end requests the request, the back end calls the interface to query the database.

Pseudo paging is a front-end request, the back-end query returns all the page number, and then the front-end requests from the previous inside the batch to the front-end page.

Bb: Generally speaking, the paging effect must be provided by the back end interface, if the back end is not willing to provide, then you can buy a cup of milk tea and ask him to drink and beat shi to heaven.Copy the code

Of course, there must be special cases that the front end needs to write pages by itself: for example, when the front end imports Excel into the table, it cannot request the back end to give you the interface with pages. At this time, all the increase, deletion, change and check of your front end need to be simulated with JS, and then save the results to request the back end interface to save in the database.

Js simulation pagination:

Taking avUE framework as an example, the personal test is effective. Firstly, all data are obtained, and then the number of data in the current page is judged circularly, and then the data of the corresponding page is intercepted for the current page table

Two things can happen with paging:

  • Total > Number of data items on the current page pageSize => Intercept corresponding data items to the table
  • Total number of entries total < Number of entries on the current page pageSize => Add all entries to the table
<template> <div class="orderSaveResult"> <avue-crud :data=" notSavetable.data ":option=" notSavetable.option" :page.sync="notSaveTable.page" @on-load="notSaveTableOnload" @current-change="notSaveTableCurrentChange" @size-change="notSaveTableSizeChange" > </avue-crud> </div> </template> <script> import notSaveTable from './const/notSaveTable' export default { name: "orderSaveResult", data() { return { notSaveTable, notSaveTableData: [],}}, created() { if (sessionStorage.getItem('setOrderData')) { if (data) { this.notSaveTable.data = data.notSaveList this.notSaveTable.page.total = data.notSaveList.length this.notSaveTableData = data.notSaveList } } }, methods: {notSaveTableOnload(page) {let val = page; If (page.toString() == '[object object]') {val = 1} this.notsavetable.data = [] // page.js for (var I =) this.notSaveTable.page.pageSize * (val - 1); i < ((this.notSaveTable.page.total > this.notSaveTable.page.pageSize * val) ? (this.notSaveTable.page.pageSize * val) : (this.notSaveTable.page.total)); i++) { } this.notSaveTable.data = this.notSaveTableData.slice(this.notSaveTable.page.pageSize * (val - 1), i) }, notSaveTableCurrentChange(page) { console.log(page) this.notSaveTable.page.currentPage = page this.notSaveTableOnload(this.notSaveTable.page.currentPage) }, notSaveTableSizeChange(size) { this.notSaveTable.page.currentPage = 1 this.notSaveTable.page.pageSize = size this.notSaveTableOnload(this.notSaveTable.page.currentPage) }, } } </script>Copy the code