zoukankan      html  css  js  c++  java
  • template and pagination

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

    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>

  • 相关阅读:
    课堂作业02
    模仿JavaAppArguments.java示例,编写一个程序,此程序从命令行接收多个数字,求和之后输出结果。
    Feign使用Hystrix无效原因及解决方法
    解决Spring Boot 使用RedisTemplate 存储键值出现乱码 xacxedx00x05tx00
    consul怎么在windows下安装
    java运行jar命令提示没有主清单属性
    Maven parent.relativePath
    Maven的pom.xml文件结构之基本配置packaging和多模块聚合结构(微服务)
    redis开启远程访问
    kibana使用
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10045181.html
Copyright © 2011-2022 走看看