JavaScript 对页面进行分页
   6 分钟阅读

页面效果 paging+loading+HTML;

点击触点(筛选条件),切换不同的状态(AJAX 获取);并且进行分页显示;

引入的 CSS 文件

1
2
<link href=”http://a.xxx.com/wui/loading/css/loading.css” rel=”stylesheet” type=”text/css”/>
<link href=”http://a.xxx.com/wui/paging/css/paging.css” rel=”stylesheet” type=”text/css”/>

引入 JS 文件:

1
2
3
var Page = require("page");
var loading = require("loading");
var juicer = require("juicer");

准备的相关

 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var listTpl = juicer(['{@if count === 0}',
    '<tr>',
    '<td colspan="8" style="text-align:center">',
    '暂无记录,请添加',
    '</td>',
    '</tr>',
    '{@else}',

    '{@each data as item,index}',
    '<tr data-agent_id="${item.agent_id}">',
    '    <td>${item.agent_id}</td>',
    '    <td>','       <ul class="wui-list wui-list-nosquare">',
    '           <li class="wui-list-item">代理商:<span class="wui-txt-sm wui-txt-warning">${item.name}</span></li>',
    '           <li class="wui-list-item">公司:${item.corp_name}</li>',
    '       </ul>',
    '    </td>',
    '    <td>${item.level}</td>',
    '    <td>',
    '       <ul class="wui-list wui-list-nosquare">',
    '           <li class="wui-list-item">${item.linkman}</li>',
    '           <li class="wui-list-item">${item.mobile}</li>',
    '       </ul>',
    '    </td>',
    '    <td>${item.agent_start}至${item.agent_end}</td>',
    '    <td>',
    '{@if item.state === 1}',
    '        <span class="wui-txt-success">正常</span>',
    '{@else if item.state === 0}',
    '        <span class="wui-txt-muted">未知</span>',
    '{@else if item.state === 2}',
    '        <span class="wui-txt-danger">暂停</span>',
    '{@else if item.state === 4}',
    '        <span class="wui-txt-primary">审核中</span>',
    '{@else if item.state === 8}',
    '        <span class="wui-txt-warning">审核不通过</span><a href="javascript:;" class="wui-txt-muted j-agent-check-help"><i class="iconfont wui-txt-sm">&#xe60e;</i>查看原因</a>',
    '<div style="display:none;">', '<div class="check_info_txt" style="padding: 10px;">',
    '{@each item.check_info as item2,index}',
    '<div class="checkinfo-text">',
    '${item2.info}',
    '</div>',
    '{@/each}',
    '</div>', '</div>',
    '{@/if}',

    '    </td>',
    '    <td>${item.remark}</td>',
    '    <td><a href="/hr/agentedit?agent_id=${item.agent_id}" target="_blank" class="wui-button wui-button-blue wui-button-s"><i class="iconfont wui-txt-sm">&#xe657;</i>修改</a>',
    /*'{@if item.state === 4}',
        '<a href="javascript:;" class="wui-button wui-button-blue wui-button-s"><i class="iconfont wui-txt-sm">&#xe65e;</i>删除</a>',
        '{@/if}',*/
    '    </td>',
    '</tr>',
    '{@/each}', '{@/if}'].join(""));
var $listTable = $("#j-listTable");
var $filter = $("#j-filter-content");

//分页
var pageIndex;
var pageLoading = new loading({
    loador: "#body-load"

});
var agentState = -1;
var parentSgentId=parent_agent_id; //页面上生成的变量,父级代理商的ID

整体文件如下

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
define(function (require, exports, module) {
    "require:nomunge,exports:nomunge,module:nomunge";

    var Page = require("page");
    var loading = require("loading");
    var juicer = require("juicer");


    var listTpl = juicer(['{@if count === 0}',
        '<tr>',
        '<td colspan="8" style="text-align:center">',
        '暂无记录,请添加',
        '</td>',
        '</tr>',
        '{@else}',

        '{@each data as item,index}',
        '<tr data-agent_id="${item.agent_id}">',
        '    <td>${item.agent_id}</td>',
        '    <td>','       <ul class="wui-list wui-list-nosquare">',
        '           <li class="wui-list-item">代理商:<span class="wui-txt-sm wui-txt-warning">${item.name}</span></li>',
        '           <li class="wui-list-item">公司:${item.corp_name}</li>',
        '       </ul>',
        '    </td>',
        '    <td>${item.level}</td>',
        '    <td>',
        '       <ul class="wui-list wui-list-nosquare">',
        '           <li class="wui-list-item">${item.linkman}</li>',
        '           <li class="wui-list-item">${item.mobile}</li>',
        '       </ul>',
        '    </td>',
        '    <td>${item.agent_start}至${item.agent_end}</td>',
        '    <td>',
        '{@if item.state === 1}',
        '        <span class="wui-txt-success">正常</span>',
        '{@else if item.state === 0}',
        '        <span class="wui-txt-muted">未知</span>',
        '{@else if item.state === 2}',
        '        <span class="wui-txt-danger">暂停</span>',
        '{@else if item.state === 4}',
        '        <span class="wui-txt-primary">审核中</span>',
        '{@else if item.state === 8}',
        '        <span class="wui-txt-warning">审核不通过</span><a href="javascript:;" class="wui-txt-muted j-agent-check-help"><i class="iconfont wui-txt-sm">&#xe60e;</i>查看原因</a>',
        '<div style="display:none;">', '<div class="check_info_txt" style="padding: 10px;">',
        '{@each item.check_info as item2,index}',
        '<div class="checkinfo-text">',
        '${item2.info}',
        '</div>',
        '{@/each}',
        '</div>', '</div>',
        '{@/if}',

        '    </td>',
        '    <td>${item.remark}</td>',
        '    <td><a href="/hr/agentedit?agent_id=${item.agent_id}" target="_blank" class="wui-button wui-button-blue wui-button-s"><i class="iconfont wui-txt-sm">&#xe657;</i>修改</a>',
        /*'{@if item.state === 4}',
            '<a href="javascript:;" class="wui-button wui-button-blue wui-button-s"><i class="iconfont wui-txt-sm">&#xe65e;</i>删除</a>',
            '{@/if}',*/
        '    </td>',
        '</tr>',
        '{@/each}', '{@/if}'].join(""));
    var $listTable = $("#j-listTable");
    var $filter = $("#j-filter-content");

    //分页
    var pageIndex;
    var pageLoading = new loading({
        loador: "#body-load"

    });
    var agentState = -1;
    var parentSgentId=parent_agent_id; //页面上生成的变量,父级代理商的ID

    var pageUtilitiy={
        init:function () {
            this.bind();
        },
        bind:function () {
            var self=this;
            //分页
            pageIndex=new Page({
                ajax: {
                    url: '/hr/agent_list',
                    type: 'POST',
                    dataType: 'json',
                    data: function () {
                        var data = {
                            parent_agent_id: parentSgentId,
                            state: agentState,
                            size: pageIndex.pagesize
                        };
                        return data;
                    },
                    success: function (res) {
                        res={
                            "data":
                                [
                                    {
                                        "agent_id":164,//代理商ID
                                        "name":"朱朱朱",//名字
                                        "level":2,//代理商等级
                                        "corp_name":"测试公司",//公司名称
                                        "linkman":"小朱",//负责人名字
                                        "mobile":"13777777788",//联系方式
                                        "phone1":"17816866557",
                                        "phone2":"17816866666",
                                        "mail":"79228807@qq.com",
                                        "zip_code":"zip_code",
                                        "qq":"79228807",
                                        "agent_start":"2016-10-27",//代理的开始事件
                                        "agent_end":"2016-10-28",//代理的结束事件
                                        "state":1,//1 是正常
                                        "remark":"我是一个测试",//备注
                                        "check_info":[]
                                    }
                                ],
                            "count":7,
                            "success":true,
                            "errorcode":0,
                            "msg":""
                        };

                        $listTable.find("tbody").empty().append(listTpl.render(res));
                        //var myUrl= kit.parseURL();
                        //window.location=kit.replaceUrlParams(myUrl,{"page":pageIndex.current});
                        pageLoading.close();
                    }
                },
                pageName: "page",
                pageType: "simple",// default 默认 full 全部,simple 简单
                getTotalPage: function (res) {
                    //返回总页数
                    if (res.count === 0) {
                        return 1;
                    }
                    return Math.ceil(res.count / pageIndex.pagesize);
                },
                getTotalRecord:function(res){
                    return res.count;
                },
                pageWrapper: '.wui-paging-wrap'
            });
            pageIndex.reset();

            //过滤
            $filter.on("click", "a", function (e) {
                e.preventDefault();
                pageLoading.show();
                var $this = $(this);
                agentState = $this.data("state");
                pageIndex.reset();
                $this.closest(".filter-item").addClass('active').siblings().removeClass('active')
            });
        }
    };
    pageUtilitiy.init();
});
本文目录