bootstrap分页小部件

bootstrap分页小部件源码下载

看看谁在用

查看文件结构

文件大小:0.00M

资源分类: 插件-其它前端代码

更新时间: 2022-07-15

一个简单、轻量级、高度可定制的分页库,可与最新的Bootstrap5框架配合使用。

首先要创意一个容器
<div id="pagination"></div>
需要分页的条目
const items = [
      "item 1",
      "item 2",
      "item 3",
      // ...
];
初始化
const pagination = easyPagination({
      // items
      items,
      // number of items per page
      rows: 5,
      // pagination container
      buttonsWrapper: "#pagination",
      // handle items here
      handlePaginatedItems: (items) => {
        const list = document.getElementById("list");
        list.innerHTML = "";
        items.forEach((item) => {
          list.innerHTML += `<li class="list-group-item">${item}</li>`;
        });
      }
});
在刚刚创建的分页里显示分页按钮
pagination.paginate();
还可以自定义样式
const pagination = easyPagination({
      buttonClass: "page-link",
      nextClass: "page-link",
      prevClass: "page-link",
      nextText: "next >",
      prevText: "< prev",
      activeClass: "active",
});
更新分页数字
pagination.changeRows(20);
更新条目
pagination.changeItems(newItems);
上一页和下一页
pagination.next();
pagination.prev();

bootstrap分页小部件

正在加载文件目录...

也许你还喜欢

  1. 简单Bootstrap瀑布流网格布局插件
  2. Bootstrap垂直手风琴Accordion插件CSS3
  3. Bootstrap兼容手机触屏轮播图jQuery切换插件
  4. Bootstrap响应式左右时间轴插件纯Css3实现
  5. Bootstrap网格纯CSS3制作团队人员介绍插件
  6. Bootstrap带图标Tabs选项卡插件
JavaScript+SVG生成二维码
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器