分页器案例 (百度招聘)

模板引擎 渲染  (underscore.js)分页器(jquery.min.js)

分页器案例 (百度招聘)

代码 分页器参考 分页器 内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="job-list-message">
            <h1>职位信息</h1>
            <div class="pull-right">
                共
                <span class="red">3016</span>
                个在招职位
            </div>
        </div>

        <div class="job-list">
            <div class="list-header">
                <div class="list-row">
                    <div class="list-col">职位名称</div>
                    <div class="list-col">职位类别</div>
                    <div class="list-col">工作地点</div>
                    <div class="list-col">招聘人数</div>
                    <div class="list-col">更新时间</div>
                    <div class="list-col"></div>
                </div>
            </div>
            <div class="list-body">


            </div>
        </div>
    </div>
    <div class="pageNav" id="pageNav">
        <span class="preve page" id="preve">上一页</span>
        <span class="next page" id="next">下一页</span>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/underscore.js"></script>
    <script type="text/template" id="template">
        <div class="dataInfo">
            <div class="list-row">
                <div class="list-col"><%=name%></div> 
                <div class="list-col"><%=postType%></div> 
                <div class="list-col"><%=workPlace%></div> 
                <div class="list-col"><%=workType%></div> 
                <div class="list-col"><%=publishDate%></div> 
                <div class="list-col">
                    <div class="icon"></div>
                </div> 
            </div>
            <div class="job-requirements">
                <h3>工作职责:</h3>
                <p><%=workContent%></p>
                <h3>职位要求:</h3>
                <p><%=serviceCondition%></p>
            </div>   
        </div>
    </script>
    <script>
        var jobTable = $(".list-body");
        //模板字符串
        var templateStr = $("#template").text()
        //console.log(templateStr);
        //模板变异函数
        var compiled = _.template(templateStr);

        function RenderDom(dictionary) {
            this.dictionary = dictionary;
            //正则匹配
            if (this.dictionary.postType.indexOf("-") != -1) {
                this.dictionary.postType = this.dictionary.postType.replace(/.*\-(.*)\-.*/g, function (match, $1) {
                    console.log(match)
                    console.log($1)
                    return $1
                })
            };
            //console.log(dictionary)
            var domStr = compiled(this.dictionary);
            //console.log(domStr)
            this.$dom = $(domStr);
            //console.log(dom)
            //渲染
            jobTable.append(this.$dom);
            //箭头上下状态 
            this.status = 1;
            //备份状态
            var self = this
            //点击箭头 展示职位详细信息
            this.$dom.find(".icon").click(function () {
                if (self.status == 1) {
                    $(this).addClass("bottonIcon");
                    self.$dom.find(".job-requirements").css("display", "block");
                    self.status = 0;
                } else {
                    $(this).removeClass("bottonIcon");
                    self.$dom.find(".job-requirements").css("display", "none");
                    self.status = 1;
                }
            })
        }

        function Pager(totalPage) {
            ..............
        }
        Pager.prototype.pageTo = function () {
            ..................
            //请求后台数据
            $.get("data/page" + this.currentPage + ".json", function (data) {
                //删除之前的数据
                $(".dataInfo").remove();
                _.each(data.postList, function (item) {
                    new RenderDom(item)
                })
            })
        }
        $.get("data/page1.json", function (data) {
            //显示总条数
            $("#rowCount").html(data.rowCount);
            _.each(data.postList, function (item) {
                new RenderDom(item)
            })
            new Pager(data.totalPage);
            console.log(data, 'data')
        })
    </script>
</body>
</html>

说明 : 数据是自己复制的假数据

目录结构

分页器案例 (百度招聘)

上一篇:连字符 | hyphens (Text) - CSS 中文开发手册 - Break易站


下一篇:Leetcode 524. Longest Word in Dictionary through Deleting