Sls-Page原生JavaScript分页，可用于所有项目资源-CSDN文库

共61个文件

js：15个

md：15个

html：14个

javascript

jQuery

原生js

需积分: 9 182 浏览量 2016-12-20 10:33:22 上传评论 1 收藏 709KB ZIP 举报

**Sls-Page** 是一个基于原生JavaScript开发的分页组件，专为各种项目设计。这个组件不依赖任何外部库，如jQuery，因此它具有轻量级、高效且易于集成的特点。Sls-Page旨在提供一个简洁的API，使得在网页应用中实现分页功能变得更加便捷。 ### 1. 分页原理分页是网页数据展示中的常见需求，特别是在处理大量数据时，以防止一次性加载过多内容导致页面加载慢或者用户体验不佳。Sls-Page通过计算总页数和当前页，动态生成分页按钮，并提供导航功能，用户点击不同页码可以切换显示的数据。 ### 2. 使用步骤 1. **引入Sls-Page**：你需要将`sls-page.js`文件引入到你的HTML页面中。可以通过下载压缩包`sls-page-master`，然后将其放置在合适的位置，并在`<head>`或`<body>`中添加`<script>`标签引用。 2. **创建容器**：在HTML中创建一个用于放置分页组件的元素，例如`<div id="pagination"></div>`。 3. **初始化分页**：在JavaScript中，使用`new SlsPage()`实例化分页对象，传入必要的配置参数，如当前页、总页数、每页显示的数据量等。 4. **事件监听**：设置事件监听器，以便在用户点击分页按钮时更新页面内容。 ### 3. 配置选项 Sls-Page提供了多种可配置的参数，允许自定义分页样式和行为： - `currentPage`：当前页码，默认为1。 - `totalPage`：总页数，根据数据量计算得出。 - `perPage`：每页显示的数据数量，默认为10。 - `prevText` 和 `nextText`：上一页和下一页的文本，可以自定义。 - `container`：分页元素的选择器，用于确定分页控件的插入位置。 - `onPageChange`：当页面切换时触发的回调函数，可以在这里更新页面内容。 ### 4. API接口 Sls-Page 提供了一些关键的API方法： - `init()`：初始化分页组件。 - `changePage(pageNumber)`：手动切换到指定页码。 - `destroy()`：销毁分页组件，释放占用的资源。 ### 5. 示例代码 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="sls-page.js"></script> </head> <body> <div id="pagination"></div> <script> var slsPage = new SlsPage({ currentPage: 1, totalPage: 100, perPage: 20, container: '#pagination' }); slsPage.init(); </script> </body> </html> ``` ### 6. 自定义样式 Sls-Page 的默认样式可能与你的项目不完全匹配，可以通过修改CSS来调整分页按钮的外观，例如更改颜色、大小、边框等。 ### 7. 整合jQuery 虽然Sls-Page不依赖jQuery，但如果你的项目已经使用了jQuery，可以方便地将Sls-Page整合进现有的jQuery代码中，只需确保在调用SlsPage构造函数之前jQuery库已加载。 ### 8. 源码学习通过阅读Sls-Page的源码（位于`sls-page.js`），你可以深入了解如何使用原生JavaScript实现一个分页组件，这将有助于提升你的前端开发技能。 Sls-Page 是一个实用的原生JavaScript分页解决方案，适用于各种项目。其轻量级、易用性和灵活性使得它成为一个理想的分页组件选择。

资源推荐

资源详情

资源评论

收起资源包目录

Sls-Page 原生JS分页.zip （61个子文件）

sls-page-master

rollup.config.js 425B

package.json 491B

readme.md 278B

index.html 249B

dist

sls-page.js 8KB

src

index.js 7KB

utils

index.js 84B

test.js 60B

object_extends.js 828B

doc

demos

demos.md 402B

parts

installed.md 306B

start.md 2KB

apis

cur-page-error-callback.md 273B

success-callback.md 1KB

callbacks.md 211B

_book

search_index.json 52KB

demos

demos.md 402B

demos.html 10KB

index.html 10KB

parts

installed.md 306B

start.html 12KB

start.md 2KB

installed.html 9KB

apis

cur-page-error-callback.html 9KB

cur-page-error-callback.md 273B

callbacks.html 9KB

success-callback.md 1KB

callbacks.md 211B

success-callback.html 12KB

gitbook

images

favicon.ico 4KB

apple-touch-icon-precomposed-152.png 5KB

gitbook-plugin-highlight

ebook.css 3KB

website.css 31KB

gitbook-plugin-search

search.css 974B

search.js 6KB

search-engine.js 1KB

lunr.min.js 15KB

fonts

fontawesome

fontawesome-webfont.eot 75KB

fontawesome-webfont.woff 88KB

FontAwesome.otf 122KB

fontawesome-webfont.svg 382KB

fontawesome-webfont.woff2 70KB

fontawesome-webfont.ttf 149KB

gitbook-plugin-sharing

buttons.js 3KB

gitbook.js 103KB

gitbook-plugin-fontsettings

fontsettings.js 6KB

website.css 8KB

gitbook-plugin-lunr

search-lunr.js 2KB

lunr.min.js 15KB

theme.js 110KB

style.css 51KB

README.md 651B

SUMMARY.md 248B

.gitignore 14B

demo

base

custom-cur-page.html 4KB

index.html 3KB

adv

index.html 2KB

custom-page-text.html 3KB

index.html 1KB

param

index.html 2KB

yarn.lock 5KB

# 简介 > 首先，这只是一个分页算法类，因为每个项目的分页样式都不同，所以不会给你生成完整的分页dom，但这个类会提供给你所有需要的分页数据。 ### 再使用之前，您必须要知道以下几点关于分页的概念 - page_total 您的数据总数 - page_size 每页显示的数量 - page_count 您的数据能分的最大页数 - page_cur 当前显示的页数 - page_show 显示的页码个数 ####上面提到的page_show页码个数，您可能不太明白，举个例子： ![](http://i.imgur.com/5baZV2J.png) 上图红色框中，显示了四个页码，这就是页码个数。

评论收藏

内容反馈