js如何使用Pagination+PageHelper實現(xiàn)分頁
一、分頁的原理:
1.1 分頁的原理
通過element-ui 的內(nèi)置組件pagination實現(xiàn)分頁,任何分頁都有以下五個部分組成:
- 記錄的總條數(shù)
- 每頁顯示的記錄條數(shù)
- 總頁數(shù)
- 當前是第幾頁
- 當前頁的所有記錄
1.2 真假分頁
pagination實際上是一個組件,組件里設(shè)置了分頁常用到的參數(shù),讓pagination組件得到分頁常用的參數(shù)值,這就能夠?qū)崿F(xiàn)分頁了。
真分頁:當你目前在首頁的時候,點擊“第二頁”或“下一頁”的時候,會重新向后端發(fā)送請求,請求第二頁的數(shù)據(jù)
假分頁:一開始從后端發(fā)送請求獲取所有的數(shù)據(jù),前端通過在組件的方式對數(shù)據(jù)進行分頁,再點擊分頁的按鈕的時候,數(shù)據(jù)其實已經(jīng)在瀏覽器緩存的緩存中了,不需要再請求后端接口
二、后端-PageHelper的使用:
1、首先要在pom.xml中添加pageHelper的依賴
<!--分頁插件--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency>
2、在映射文件中書寫“SQL查詢”語句;注意:語句結(jié)束不要用“;”
<select id="QueryProductsById" resultMap="ProductsMap"> SELECT <include refid="products_cloumn_list"/> FROM products WHERE id = #{Id} </select>
3、書寫Controller類,注意:調(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、啟動tomcat服務(wù)器,使用Apipost對接口進行測試,如果接口沒有問題的話,就會在“實時響應(yīng)”中獲取到返回值信息。
三、前端-Pagination的使用:
(使用pagination之前,需要會element-UI有初步的了解),因為使用pagination就是一個從vue-element-admin上“搬運”代碼的過程。具體可以在element集成上搜索“pagination”進行查看
1、添加<template>標簽的內(nèi)容到需要分頁的頁面中
<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、注冊本地組件,并且因為在添加<template>標簽的時候,綁定的有屬性和方法,所以要對屬性進行聲明,以及方法的實現(xiàn)
export default { components: { Pagination }, data() { return { list: [{ //查詢出來的商品集合 }], total: 0, listQuery: { page: 1, limit: 20 } } }, methods: { getList() { // 獲取數(shù)據(jù) } } }
4、實現(xiàn) getList() 方法,發(fā)送axios請求獲取后端傳遞的數(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()方法,讓頁面加載時候調(diào)用 getList()方法,實現(xiàn)分頁即可 :
created() { this.getList() },
效果圖如下:
四、分頁中的細節(jié):
分頁中可以在進行更為詳細的設(shè)置,比如背景色、當前頁、總頁數(shù)、去往第幾頁等等都可以在pagination的index.vue中進行設(shè)置
<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background"http://背景色 true 為有背景色,false為無背景色 :current-page.sync="currentPage" //當前頁 :page-size.sync="pageSize" //頁面的大小 :layout="layout" :page-sizes="pageSizes" :total="total" //總頁數(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>
可以進行適當?shù)男薷模蛘呷绻幌胍承┕δ?,刪除對應(yīng)的部分即可~~~
到此這篇關(guān)于js如何使用Pagination+PageHelper實現(xiàn)分頁的文章就介紹到這了,更多相關(guān)js Pagination PageHelper分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Mybatis分頁插件PageHelper的使用詳解
- SpringBoot項目中分頁插件PageHelper無效的問題及解決方法
- SpringMvc+Mybatis+Pagehelper分頁詳解
- Spring Boot+Mybatis+Druid+PageHelper實現(xiàn)多數(shù)據(jù)源并分頁的方法
- Springboot整合pagehelper分頁功能
- 使用mybatis插件PageHelper實現(xiàn)分頁效果
- MyBatis分頁插件PageHelper的具體使用
- MyBatis基于pagehelper實現(xiàn)分頁原理及代碼實例
- Bootstrap Paginator+PageHelper實現(xiàn)分頁效果
- Spring Boot+Mybatis+Pagehelper分頁實現(xiàn)
相關(guān)文章
Ajax高級筆記 JavaScript高級程序設(shè)計筆記
這篇文章主要介紹了Ajax高級筆記 JavaScript高級程序設(shè)計筆記,需要的朋友可以參考下2017-06-06javascript正則表達式參數(shù)/g與/i及/gi的使用指南
正則表達式:是對字符串操作的一種邏輯公式,用事先定義好的一些特定字符、及這些特定字符的組合,組成一個“規(guī)則字符串”,這個“規(guī)則字符串”用來表達對字符串的一種過濾邏輯2014-08-08微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01js字母大小寫轉(zhuǎn)換實現(xiàn)方法總結(jié)
本文是對js中字母大小寫轉(zhuǎn)換的實現(xiàn)方法進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11