基于EasyHelper的分页效果代码

基于EasyHelper的分页效果代码

实现内容分页功能。jQuery库,要求其最低版本不得低于3.2.0。

使用方法
CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.title {
  text-align: center;
  font-size: 24px;
  margin-top: 50px;
}
.content {
  margin: 30px auto;
  width: 1000px;
  height: 409px;
  border: #dfdfdf solid 1px;
 overflow: hidden;
}
.content li {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  border-bottom: #e8e8e8 solid 1px;
}
.page {
  text-align: center;
  margin-bottom: 200px;
}

基础版分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="content">
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>
<div class="page" id="page-1"></div>

显示总数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="content">
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</div>
<div class="page" id="page-2"></div>

本地模拟生成函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var $content = $( ".content" );
function createContent ( i, index ) {
    $content.eq( index ).empty().html( ('<li>' + i + '</li>').repeat(10) );
}

// 调用分页功能 [ 基础版 ]
Helper.ui.page("#page-1", {
    total: 2000,
    pageSize: 10,
    change: function ( i ) {
        createContent( i, 0 );
    }
});
Helper.ui.page("#page-2", {
    total: 2000,
    pageSize: 10,
    showTotal: true,
    change: function ( i ) {
        createContent( i, 1 );
    }
});
Helper.ui.page("#page-3", {
    total: 2000,
    pageSize: 10,
    showTotal: true,
    showTo: true,
    change: function ( i ) {
        createContent( i, 2 );
    }
});
Helper.ui.page("#page-4", {
    total: 2000,
    pageSize: 10,
    showTotal: true,
    showTo: true,
    currentPage: 25,
    change: function ( i ) {
        createContent( i, 3 );
    }
});
温馨提示:此处内容需要评论本文后才能查看。
1

发表评论