Bootstrap Pagination

一个具有 bootstrap 特征的可以快速跳转第一页,最后一页,下一页,上一页,且可以被其他组件(nly-table)直接控制的分页

v0.6.7 版本以上 nly-adminlte-vue 才有此组件

分页的总页数是由 prop total-rowsper-page 计算的。

<template>
  <div class="overflow-auto" style="width:100%">
    <nly-bootstrap-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      aria-controls="my-table"
    ></nly-bootstrap-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <nly-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></nly-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [
          { id: 1, first_name: "张三", last_name: "张" },
          { id: 2, first_name: "李四", last_name: "李" },
          { id: 3, first_name: "王五", last_name: "王" },
          { id: 4, first_name: "赵一", last_name: "赵" },
          { id: 5, first_name: "钱二", last_name: "钱" },
          { id: 6, first_name: "孙六", last_name: "孙" },
          { id: 7, first_name: "左七", last_name: "左" },
          { id: 8, first_name: "右八", last_name: "右" },
          { id: 9, first_name: "龙九", last_name: "龙" }
        ]
      };
    },
    computed: {
      rows() {
        return this.items.length;
      }
    }
  };
</script>

<!-- 简单分页.name -->
<!-- with pagination.vue -->

自定义外观和式样

<nly-bootstrap-pagination> 支持多个 prop 和 slots 来自定义外观和式样。 所有类似 *-text 的 prop 都是纯文本类型的,且非 html 字符串。同时还有对应的同名插槽。

自定义按钮显示数量

<nly-bootstrap-pagination> 可以支持自定义显示按钮数量(按钮包括:跳转到第一页按钮,上一页按钮,下一页按钮,跳转到最后一页按钮,跳转到指定一页按钮,省略号等)。

使用 limit prop 可以设置显示按钮的最大数量。 默认的最大数量按钮是 5,最小可设置为 3。当设置为 3 的时候,省略号并不会显示。

跳转到第一页按钮(first)和 跳转到最后一页按钮 (last) 可以设置 hide-goto-end-buttonstrue 来隐藏

分页器中的 ... 省略号可以用 hide-ellipsis prop 来隐藏

小屏模式

在较小的屏幕上, <nly-bootstrap-pagination> 的部分按钮会自动隐藏,以适应小屏显示。

  • 省略号会在 xs 及更小的屏幕上自动隐藏

  • 分页按钮数量在 xs 及更小的屏幕上会只显示 3 个

在小屏模式中, 分页一般只会出现三个按钮, 这三个按钮只会出现第一页,上一页,下一页,最后一页四个类型中的三个。

按钮文本内容

*-text一类 slotsprop 的用法:

<template>
  <div class="overflow-auto">
    <nly-bootstrap-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      first-text="First"
      prev-text="Prev"
      next-text="Next"
      last-text="Last"
    ></nly-bootstrap-pagination>

    <nly-bootstrap-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      first-text="⏮"
      prev-text="⏪"
      next-text="⏩"
      last-text="⏭"
      class="mt-4"
    ></nly-bootstrap-pagination>

    <nly-bootstrap-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      class="mt-4"
    >
      <template #first-text><span class="text-success">First</span></template>
      <template #prev-text><span class="text-danger">Prev</span></template>
      <template #next-text><span class="text-warning">Next</span></template>
      <template #last-text><span class="text-info">Last</span></template>
      <template #ellipsis-text>
        <nly-spinner sm type="grow"></nly-spinner>
        <nly-spinner sm type="grow"></nly-spinner>
        <nly-spinner sm type="grow"></nly-spinner>
      </template>
      <template #page="{ page, active }">
        <b v-if="active">{{ page }}</b>
        <i v-else>{{ page }}</i>
      </template>
    </nly-bootstrap-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        perPage: 10,
        currentPage: 1
      };
    }
  };
</script>

<!-- *-text.name -->
<!-- *-text.vue -->

page, first-text, prev-text, next-text, last-text 都是作用域插槽. ellipsis-text 是普通插槽。详情请查看

作用域插槽 page 可调用参数:

参数 类型 描述
page Number 页码,从 1 开始到 总页数
index Number 页码索引, 从 1 开始到 总页数-1
active Boolean 如果当前页码跟按钮指向的页码匹配,则会处于激活状态
disabled Boolean 禁用当前页码按钮
content String 当前页码按钮的文本内容

作用域插槽 first-text, prev-text, next-text, last-text 可调用参数:

参数 类型 描述
page Number 页码, 从 1 开始到 总页数
index Number 页码索引, 从 1 开始到 总页数-1
disabled Boolean 禁用当前页码按钮

最后一页和第一页按钮类型

默认最后一页和第一页按钮是 <<>>。可以设置 prop first-numberlast-numbertrue 来使得按钮变为数字。

<template>
  <div class="overflow-auto">
    <div>
      <h6>第一页按钮为数字</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        first-number
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>最后一页为数字</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        last-number
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>第一页和最后一页都是数字</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        first-number
        last-number
      ></nly-bootstrap-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        perPage: 1,
        currentPage: 5
      };
    }
  };
</script>

<!-- first and last number.name -->
<!-- first and last number.vue -->

大小

可以设置 size prop 来调整分页的大小, 可选 sm, md, lg

<template>
  <div class="overflow-auto">
    <div>
      <h6>小型</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        size="sm"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>默认</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>大型</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        size="lg"
      ></nly-bootstrap-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 1
      };
    }
  };
</script>

<!-- size.name -->
<!-- size.vue -->

pills 圆形按钮

可以设置 pillstrue 把分页外观从方形设为圆形

<template>
  <div class="overflow-auto">
    <div>
      <h6>Small Pills</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        pills
        :total-rows="rows"
        size="sm"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>Default Pills</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        pills
        :total-rows="rows"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6>Large Pills</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        pills
        :total-rows="rows"
        size="lg"
      ></nly-bootstrap-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 1
      };
    }
  };
</script>

<!-- pill page .name -->
<!-- pill page.vue -->

水平布局,位置

设置 align prop 可以调整分页的水平布局,可选 left(start), center, right(end), fill

<template>
  <div class="overflow-auto">
    <div>
      <h6>左侧布局(默认)</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-center">居中布局</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        align="center"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-right">右侧布局</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        align="right"
      ></nly-bootstrap-pagination>
    </div>

    <div class="mt-3">
      <h6 class="text-center">填充父元素</h6>
      <nly-bootstrap-pagination
        v-model="currentPage"
        :total-rows="rows"
        align="fill"
      ></nly-bootstrap-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rows: 100,
        currentPage: 3
      };
    }
  };
</script>

<!-- align.name -->
<!-- align.vue -->

阻止页码被选中

你可以使用 page-click 事件来阻止页码被选中。

page-click 事件可以传入 2 个参数:

  • nlyaEvent, NlyaEvent 对象, 可以调用 nlyaEvt.preventDefault() 来取消或者阻止页码被选择

  • page, 被选择的页码

对于屏幕阅读器来说, 你在使用 page-click 的时候需要提供一个消息来告诉屏幕阅读器这个页码被你阻止选择了。 更好的方式是设置 prop disabled 来禁用分页按钮点击事件

组件参数

<nly-bootstrap-pagination>

v0.6.7+

props 参数

props (Click to sort Ascending)类型默认值描述
disabled
Booleanfalse禁用,设置true为禁用状态
value
v-model
Number or Stringnull当前页码, 数值从 1 开始
limit
Number or String5分页显示的最大按钮数量,包括生略号
align
String'left'分页显示位置, 'start' ('left') 左侧显示, 'center' 居中显示, 'end' (or 'right') 右侧显示, 'fill' 填充整个父元素
pills
v0.6.7+
Booleanfalse圆形按钮
hide-goto-end-buttons
Booleanfalse设置 true 隐藏跳转到第一页和最后一页的按钮
aria-label
String'Pagination''aria-label' attr 属性
label-first-page
String'Go to first page'跳转到一个页按钮的 'aria-label' attr 属性
first-text
String'«'第一页按钮的文本内容
first-number
v0.6.7+
Booleanfalse设置 true 显示第一页页码,隐藏跳转到第一页按钮
first-class
v0.6.7+
String or Array or Objectnull第一页按钮的自定义 css
label-prev-page
String'Go to previous page'上一页按钮的 'aria-label' attr 属性
prev-text
String'‹'上一页按钮的文本内容
prev-class
v0.6.7+
String or Array or Objectnull上一页按钮的自定义 css
label-next-page
String'Go to next page'下一页按钮的 'aria-label' attr 属性
next-text
String'›'下一页按钮的文本内容
next-class
v0.6.7+
String or Array or Object下一页按钮的自定义 css
label-last-page
String'Go to last page'最后一页按钮的 'aria-label' attr 属性
last-text
String'»'最后一页的文本内容
last-number
v0.6.7+
Booleanfalse设置 true 显示最后一页页码,隐藏跳转到最后一页按钮
last-class
v0.6.7+
String or Array or Object最后一页按钮的自定义 css
label-page
String or Function'Go to page'跳转到指定页面的按钮的 'aria-label' attr 属性. 页码会自动添加到传入值的前面
page-class
v0.6.7+
String or Array or Object跳转到指定页按钮的自定义 css
hide-ellipsis
Booleanfalse设置 true 隐藏省略号
ellipsis-text
String'…'传入值会代替省略号
ellipsis-class
v0.6.7+
String or Array or Object省略号的自定义 csss
size
Stringnull分页器大小, 可选: 'sm', 'md' (默认), 或者 'lg'
per-page
Number or String20每一页的数据条数
total-rows
Number or String0整个数据总数量,比如传入一个 data 有 40 条数据,那么可以设置 totalRows = 40, 这个 prop 可以直接控制假分页组件
aria-controls
String被分页器控制的元素的 ID,传入值会渲染在 'aria-controls' attr 属性上

v-model

PropertyEvent
valueinput

Slots

Slot NameScopedDescription
first-text "go to first page" 第一页按钮文本插槽, 作用域插槽
prev-text "go to previous page" 按钮文本插槽, 作用域插槽
next-text "go to next page" 下一页按钮文本插槽, 作用域插槽
last-text "go to last page" 按钮文本插槽,作用域插槽
ellipsis-text No省略号文本插槽
page 页码按钮插槽,作用域插槽

Events

EventArgumentsDescription
input
  1. page - 返回选择的页码数,从1开始,如果没有找到页码,则为 null
页面发生变化时触发的 emit 事件
change
  1. page - 返回选择的页码
用户交互修改页面的时候触发的 emit 事件
page-click v0.6.7+
  1. nlyaEvt - `NlyaEvent` 对象. 使用 `nlyaEvt.preventDefault()` 取消页码点击
  2. page - 选择的页码
页码跳转按钮点击时触发的事件

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-bootstrap-pagination>NlyBootstrapPaginationnly-adminlte-vue

例子

import { NlyBootstrapPagination } from 'nly-adminlte-vue'
Vue.component('nly-bootstrap-pagination', NlyBootstrapPagination)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
BootstrapPaginationPluginnly-adminlte-vue

例子

import { BootstrapPaginationPlugin } from 'nly-adminlte-vue'
Vue.use(BootstrapPaginationPlugin)