Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
爱吃血肠
paginationjs
提交
db3c3594
P
paginationjs
项目概览
爱吃血肠
/
paginationjs
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
P
paginationjs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
db3c3594
编写于
12月 06, 2015
作者:
L
leon.shi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
上级
c49ee5ce
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
89 addition
and
3 deletion
+89
-3
README.md
README.md
+89
-3
未找到文件。
README.md
浏览文件 @
db3c3594
...
...
@@ -9,25 +9,111 @@
<img
src=
"examples/images/paginationjs_record.gif"
alt=
"paginationjs"
width=
"500"
>
See demos and full documentation at
[
Documentation
](
http://paginationjs.com/docs/index.html
)
See demos and full documentation at
official site:
[
http://paginationjs.com
](
http://paginationjs.com
)
# Installation / Download
`bower install paginationjs`
or just download
[
pagination.js
](
dist/pagination.js
)
from the git repo.
# Usage:
# Quick Start
HTML:
```
html
<div
id=
"data-container"
></div>
<div
id=
"pagination-container"
></div>
```
JS:
```
js
$
(
'
#container
'
).
pagination
({
$
(
'
#
pagination-
container
'
).
pagination
({
dataSource
:
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
...
,
195
],
callback
:
function
(
data
,
pagination
)
{
// template method of yourself
var
html
=
template
(
data
);
$
(
'
#data-container
'
).
html
(
html
);
}
})
```
# Data rendering
Below is a minimal data rendering method:
```
js
function
simpleRender
(
data
)
{
var
html
=
'
<ul>
'
;
$
.
each
(
data
,
function
(
index
,
item
){
html
+=
'
<li>
'
+
item
+
'
</li>
'
;
});
html
+=
'
</ul>
'
;
return
html
;
}
```
Calling:
```
js
$
(
'
#container
'
).
pagination
({
dataSource
:
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
...
,
195
],
callback
:
function
(
data
,
pagination
)
{
var
html
=
simpleRender
(
data
);
dataContainer
.
html
(
html
);
}
})
```
To make it easier to maintain, you'd better use specialized templating engine to do the data rendering.
Below is an example using
[
undercore.template
](
http://underscorejs.org/#template
)
:
```
js
$
(
'
#container
'
).
pagination
({
dataSource
:
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
...
,
195
],
callback
:
function
(
data
,
pagination
)
{
var
html
=
_
.
template
(
templateString
,
{
data
:
data
});
/* templateString:
<ul>
<% for (var i = 0, len = data.length; i < len; i++) { %>
<li><%= data[i] %></li>
<% } %>
</ul>
*/
dataContainer
.
html
(
html
);
}
})
```
Using
[
Handlebars
](
http://handlebarsjs.com/
)
:
```
js
$
(
'
#container
'
).
pagination
({
dataSource
:
[
1
,
2
,
3
,
4
,
5
,
6
,
7
,
...
,
195
],
callback
:
function
(
data
,
pagination
)
{
var
html
=
Handlebars
.
compile
(
templateString
,
{
data
:
data
});
/* templateString:
<ul>
{{#each data}}
<li>{{this}}</li>
</ul>
{{/each}}
*/
dataContainer
.
html
(
html
);
}
})
```
Or any other templating engine what you prefer.
# License
Released under the MIT license.
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录