首页 > 其他 > 详细

template and pagination

时间:2018-11-30 17:12:52      阅读:141      评论:0      收藏:0      [点我收藏+]

模板引擎和分页结构插件的使用方法

1. 引入插件

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

  <script src="js/twbs-pagination/jquery.twbsPagination.js"></script>

2. 创建模板

/*web.js 既支持原生语法,也支持简洁语法*/

  <script type="text.template id="tpl">

    遍历对象

    {{each aa as value index}}

      <li>{{value.name}}</li>

    {{/each}}

  </script>

 3.获取数据

   <script>

    /*发送ajax请求,得到数据*/

    $.ajax({

      type: get,

      url: get.php

      data:{id: id}

      success: function(res){

        if(res.code== 1){

          var data = res.data;

            /*res 是获得数据对象, data是对象力的数组

            1. template("tpl", res)  } ;    {{each data value}}  res是对象, 可以直接遍历里面的数组

            2. template("tpl",{aa: res.data}});  {{each aa value}} 给数组命名, 数组变成对象,可以直接遍历aa

            3. template("tpl", res.data) ;   {{each $data as value}}  res.data是数组, 不能直接遍历, $data是固定写法*/

 

          var html = template("tpl", {aa: res.data});

          document.querySelector("ul").innerHTML = html;

 

          4.分页结构插件的使用. 调用 twbsPagination() 方法

            方法里面传三个参数:总页数, 可见页数, 页面点击事件: 获得当前页面

          $(".pagination").twbsPagination(

            totalPages: 100,

            visiblePages: 5,  

            onPageClick: function(event, page){

              currentPage = page;

            }

          );

        }

      }

    })

  </script>

template and pagination

原文:https://www.cnblogs.com/noraZhang/p/10045181.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!