jquery带省略号分页插件，点击省略号可弹窗选择分页数

演示  website 下载

这是一款简单的jQuery分页插件，通过单击省略号,会弹出一列选择器包含所有页码的窗口,可以快速选择所需的页面。

1. 加载分页样式文件和jquery库、分页插件文件。

<link rel="stylesheet" href="jquery.simple-pagination.min.css" />
<script src="jquery.slim.min.js"></script>
<script src="jquery.simple-pagination.min.js"></script>

2.  创建一个分页组件容器。

<div id="myPagination"></div>

3. 初始化插件。

$('#myPagination').simplePagination({
  current: 3,
  count: 15
});

4. 确定单选按钮的名称。 默认值:“分页”。

$('#myPagination').simplePagination({
  current: 3,
  count: 15,
  name: '分页'
});

5. 设置多个分页组件。

<div id="topPagi"></div>
  ...
<div id="bottomPagi"></div>
('#topPagi').simplePagination({
  current: 7,
  count: 14,
  name: 'pagi',
  mirrorContainer: '#bottomPagi'
});

6. 分页组件HTML结构:

<div id="myPagination">
  <div class="simple-pagination">
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">←</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="1">1</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">2</button>
    <button class="simple-pagination__button simple-pagination__button--disable" type="button" data-action="pagination-page" data-page="3">3</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">4</button>
    <div class="simple-pagination__spred">
      <button class="simple-pagination__button" type="button" data-action="pagination-spred">...</button>
      <div class="simple-pagination__select">
        <div class="simple-pagination-select">
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="5">5</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="6">6</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="7">7</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="8">8</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="9">9</button>
          </div>
        </div>
      </div>
    </div>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="10">10</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">→</button>
  </div>
  <div class="simple-pagination-radio">
    <input type="radio" name="page" value="1">
    <input type="radio" name="page" value="2">
    <input type="radio" name="page" value="3" checked="">
    <input type="radio" name="page" value="4">
    <input type="radio" name="page" value="5">
    <input type="radio" name="page" value="6">
    <input type="radio" name="page" value="7">
    <input type="radio" name="page" value="8">
    <input type="radio" name="page" value="9">
    <input type="radio" name="page" value="10">
  </div>
</div>

7.返回当前页面数:

$('#myPagination input[name=page]').change(function() {
  console.log($(this).val());
});

8. 创建自定义分页按钮。

var myPagi = $('#myPagination').simplePagination({
    // options here
});
// back to prev page
myPagi.setPrevPage();
// go to next page
myPagi.setNextPage();
// go to a specific page
myPagi.setPage(1);

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。