js如何使用Pagination+PageHelper實現分頁

2022-06-17 14:01:06

一、分頁的原理：

1.1 分頁的原理

通過element-ui 的內建元件pagination實現分頁，任何分頁都有以下五個部分組成：

記錄的總條數
每頁顯示的記錄條數
總頁數
當前是第幾頁
當前頁的所有記錄

1.2 真假分頁

pagination實際上是一個元件，元件裡設定了分頁常用到的引數，讓pagination元件得到分頁常用的引數值，這就能夠實現分頁了。

真分頁：當你目前在首頁的時候，點選“第二頁”或“下一頁”的時候，會重新向後端傳送請求，請求第二頁的資料

假分頁:一開始從後端傳送請求獲取所有的資料，前端通過在元件的方式對資料進行分頁，再點選分頁的按鈕的時候，資料其實已經在瀏覽器快取的快取中了，不需要再請求後端介面

二、後端-PageHelper的使用：

1、首先要在pom.xml中新增pageHelper的依賴

<!--分頁外掛-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>

2、在對映檔案中書寫“SQL查詢”語句；注意：語句結束不要用“；”

<select id="QueryProductsById" resultMap="ProductsMap">
        SELECT
        <include refid="products_cloumn_list"/>
        FROM products WHERE id = #{Id}
    </select>

3、書寫Controller類，注意：呼叫PageHelper的startPage方法一定要在呼叫介面中方法前。

@RequestMapping("/PageInfo")
    public PageInfo<Products> pageInfo(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Products> list = productsDaoService.QueryProducts();
        PageInfo<Products> pageInfo = new PageInfo<Products>(list);
        return pageInfo;
    }

4、啟動tomcat伺服器，使用Apipost對介面進行測試，如果介面沒有問題的話，就會在“實時響應”中獲取到返回值資訊。

三、前端-Pagination的使用：

（使用pagination之前，需要會element-UI有初步的瞭解），因為使用pagination就是一個從vue-element-admin上“搬運”程式碼的過程。具體可以在element整合上搜尋“pagination”進行檢視

1、新增<template>標籤的內容到需要分頁的頁面中

 <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList" />

2、根據element整合中，在<script>中匯入Pagination元件

import Pagination from '@/components/Pagination'

pagination元件中index.vue的內容如下:

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<script>
import { scrollTo } from '@/utils/scroll-to'
 
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>
 
<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

3、註冊本地元件，並且因為在新增<template>標籤的時候，繫結的有屬性和方法，所以要對屬性進行宣告，以及方法的實現

export default {
    components: { Pagination },
    data() {
      return {
        list: [{
            //查詢出來的商品集合
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
  methods: {
        getList() {
      // 獲取資料
    }
  }
}

4、實現 getList() 方法，傳送axios請求獲取後端傳遞的資料，分別將返回的總條數和資料資訊分貝賦給原生的total、list集合

  getList() {
        // 獲取資料
        var vm = this;
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/ssm-template/products/PageInfo?pageNum='+vm.listQuery.page+'&pageSize='+vm.listQuery.limit
        })
          .then(function (response) {
            vm.total = response.data.total;
            vm.list = response.data.list;
          })
      },

5、使用 created()方法，讓頁面載入時候呼叫 getList()方法，實現分頁即可：

created() { this.getList() },

效果圖如下：

四、分頁中的細節：

分頁中可以在進行更為詳細的設定，比如背景色、當前頁、總頁數、去往第幾頁等等都可以在pagination的index.vue中進行設定

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"//背景色  true 為有背景色，false為無背景色
      :current-page.sync="currentPage"   //當前頁
      :page-size.sync="pageSize" //頁面的大小
      :layout="layout"   
      :page-sizes="pageSizes"
      :total="total" //總頁數
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<script>
import { scrollTo } from '@/utils/scroll-to'
 
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>
 
<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

可以進行適當的修改，或者如果不想要某些功能，刪除對應的部分即可~~~

到此這篇關於js如何使用Pagination+PageHelper實現分頁的文章就介紹到這了,更多相關js Pagination PageHelper分頁內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！