js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁(yè)

更新時(shí)間：2022年06月17日 11:41:21 作者：暇光署墨

本文主要介紹了js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁(yè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、分頁(yè)的原理：

1.1 分頁(yè)的原理

通過(guò)element-ui 的內(nèi)置組件pagination實(shí)現(xiàn)分頁(yè)，任何分頁(yè)都有以下五個(gè)部分組成：

記錄的總條數(shù)
每頁(yè)顯示的記錄條數(shù)
總頁(yè)數(shù)
當(dāng)前是第幾頁(yè)
當(dāng)前頁(yè)的所有記錄

1.2 真假分頁(yè)

pagination實(shí)際上是一個(gè)組件，組件里設(shè)置了分頁(yè)常用到的參數(shù)，讓pagination組件得到分頁(yè)常用的參數(shù)值，這就能夠?qū)崿F(xiàn)分頁(yè)了。

真分頁(yè)：當(dāng)你目前在首頁(yè)的時(shí)候，點(diǎn)擊“第二頁(yè)”或“下一頁(yè)”的時(shí)候，會(huì)重新向后端發(fā)送請(qǐng)求，請(qǐng)求第二頁(yè)的數(shù)據(jù)

假分頁(yè):一開(kāi)始從后端發(fā)送請(qǐng)求獲取所有的數(shù)據(jù)，前端通過(guò)在組件的方式對(duì)數(shù)據(jù)進(jìn)行分頁(yè)，再點(diǎn)擊分頁(yè)的按鈕的時(shí)候，數(shù)據(jù)其實(shí)已經(jīng)在瀏覽器緩存的緩存中了，不需要再請(qǐng)求后端接口

二、后端-PageHelper的使用：

1、首先要在pom.xml中添加pageHelper的依賴(lài)

<!--分頁(yè)插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>

2、在映射文件中書(shū)寫(xiě)“SQL查詢(xún)”語(yǔ)句；注意：語(yǔ)句結(jié)束不要用“；”

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

3、書(shū)寫(xiě)Controller類(lèi)，注意：調(diào)用PageHelper的startPage方法一定要在調(diào)用接口中方法前。

@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、啟動(dòng)tomcat服務(wù)器，使用Apipost對(duì)接口進(jìn)行測(cè)試，如果接口沒(méi)有問(wèn)題的話，就會(huì)在“實(shí)時(shí)響應(yīng)”中獲取到返回值信息。

三、前端-Pagination的使用：

（使用pagination之前，需要會(huì)element-UI有初步的了解），因?yàn)槭褂胮agination就是一個(gè)從vue-element-admin上“搬運(yùn)”代碼的過(guò)程。具體可以在element集成上搜索“pagination”進(jìn)行查看

1、添加<template>標(biāo)簽的內(nèi)容到需要分頁(yè)的頁(yè)面中

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

2、根據(jù)element集成中，在<script>中導(dǎo)入Pagination組件

import Pagination from '@/components/Pagination'

pagination組件中index.vue的內(nèi)容如下:

<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、注冊(cè)本地組件，并且因?yàn)樵谔砑?lt;template>標(biāo)簽的時(shí)候，綁定的有屬性和方法，所以要對(duì)屬性進(jìn)行聲明，以及方法的實(shí)現(xiàn)

export default {
    components: { Pagination },
    data() {
      return {
        list: [{
            //查詢(xún)出來(lái)的商品集合
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
  methods: {
        getList() {
      // 獲取數(shù)據(jù)
    }
  }
}

4、實(shí)現(xiàn) getList() 方法，發(fā)送axios請(qǐng)求獲取后端傳遞的數(shù)據(jù)，分別將返回的總條數(shù)和數(shù)據(jù)信息分貝賦給本地的total、list集合

  getList() {
        // 獲取數(shù)據(jù)
        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()方法，讓頁(yè)面加載時(shí)候調(diào)用 getList()方法，實(shí)現(xiàn)分頁(yè)即可：

created() { this.getList() },

效果圖如下：

四、分頁(yè)中的細(xì)節(jié)：

分頁(yè)中可以在進(jìn)行更為詳細(xì)的設(shè)置，比如背景色、當(dāng)前頁(yè)、總頁(yè)數(shù)、去往第幾頁(yè)等等都可以在pagination的index.vue中進(jìn)行設(shè)置

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"http://背景色  true 為有背景色，false為無(wú)背景色
      :current-page.sync="currentPage"   //當(dāng)前頁(yè)
      :page-size.sync="pageSize" //頁(yè)面的大小
      :layout="layout"   
      :page-sizes="pageSizes"
      :total="total" //總頁(yè)數(shù)
      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>

可以進(jìn)行適當(dāng)?shù)男薷?，或者如果不想要某些功能，刪除對(duì)應(yīng)的部分即可~~~

到此這篇關(guān)于js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁(yè)的文章就介紹到這了,更多相關(guān)js Pagination PageHelper分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: