页面多模块 art-template模板渲染 + bootstrap分页

1, 引入bootstrap分页相关的css/js

<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap.min.css" target="_blank" rel="external nofollow"  />
<script src="/bootstrap/bootstrap.min.js"></script>
<script src="/bootstrap/jquery.twbsPagination.min.js"></script>
           

2, 引入art-template模板渲染相关js

<script src="/js/template-web.js"></script>
           

3, 编写多模块相关html

<div>
    <div class="top">
        <div class="s1">
            <span></span>
            <p>模块1</p>
        </div>
        <div class="s2">
            <span></span>
            <p>模块2</p>
        </div>
        <div class="s3">
            <span></span>
            <p>模块3</p>
        </div>
    </div>

    <!-- 模板渲染循环主体 -->
    <div id="content">

    </div>

    <!-- 分页 -->
    <div class="fen" style="text-align: center">
        <ul class="pagination1 pagination-sm">
        </ul>
        <ul class="pagination2 pagination-sm">
        </ul>
        <ul class="pagination3 pagination-sm">
        </ul>
    </div>
</div>
           

3, 编写模板渲染js

<!-- 模板渲染 嵌套循环 -->
<script id="template" type="text/html">
    {{each article as value i}}
    <div class="box">
        <h2>{{value.title}}
            <span>{{value.addtime}}</span>
        </h2>
        <ul>
            {{each value.content as data j}}
            <li>{{data}}</li>
            {{/each}}
        </ul>
    </div>
    {{/each}}
</script>
           

4, 编写相关js

<script>
    //声明公用变量
    var pageSize = 5;//每页显示的文章数
    var pageCount;//当前模块最大的页码数

    //页面初始化加载模块一
    var currentPage = 1;
    templatePage(currentPage, 1, ".pagination1");

    //模块一
    $(".s1").click(function () {
        //获取当前模块当前所在页码
        var currentPage = $('.pagination1 li.active').text();
        if (!currentPage) {
            currentPage = 1;
        }
        templatePage(currentPage, 1, ".pagination1");
        $(".pagination2").hide();
        $(".pagination3").hide();
        $(".pagination1").css({
            "display": "inline-block"
        });
    })

    //模块二
    $(".s2").click(function () {
        //获取当前模块当前所在页码
        var currentPage = $('.pagination2 li.active').text();
        if (!currentPage) {
            currentPage = 1;
        }
        templatePage(currentPage, 2, ".pagination2");
        $(".pagination1").hide();
        $(".pagination3").hide();
        $(".pagination2").css({
            "display": "inline-block"
        });
    })

    //模块三
    $(".s3").click(function () {
        //获取当前模块当前所在页码
        var currentPage = $('.pagination3 li.active').text();
        if (!currentPage) {
            currentPage = 1;
        }
        templatePage(currentPage, 3, ".pagination3");
        $(".pagination1").hide();
        $(".pagination2").hide();
        $(".pagination3").css({
            "display": "inline-block"
        });
    })

    //封装art-template模板渲染 + bootstrap分页
    //currentPage - 当前页; type - 第几个模块; pagination - 对应模块分页的class类
    function templatePage(currentPage, type, pagination) {
        $.ajax({
            url: "updated",
            type: 'POST',
            async: true,
            dataType: "JSON",
            data: {
                type: type,
                page: currentPage
            },
            success: function (t) {
                var t = JSON.parse(t)
                var data = t.data;
                var html = template('template', data);
                $("#content").html(html);
                var pageCount = Math.ceil(data.count / pageSize);
                // 分页按钮插件
                $(pagination).twbsPagination({
                    totalPages: pageCount, //最大的页码数
                    hideOnlyOnePage: true, //只有一页时不展示分页
                    first: "首页",
                    last: "末页",
                    prev: "上一页",
                    next: "下一页",
                    onPageClick: function (event, page) {
                        currentPage = page;
                        templatePage(currentPage, type, pagination);
                    }
                })
            }
        })
    }
</script>
           

5, 页面效果