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>

  • 相关阅读:
    leetcode66 plusOne
    park/unpark 阻塞与唤醒线程
    leetcode55 jumpGame贪心算法
    ACID特性与事务的隔离级别
    PCB ODB++(Gerber)图形绘制实现方法
    PCB 所建不凡 AWS 技术峰会2018 • 深圳站 2018.9.20
    PCB SQL SERVER 位运算应用实例
    PCB SQL SERVER 枚举分割函数(枚举值分解函数)
    PCB SQL SERVER 正则应用实例
    PCB Genesis 外形加内角孔实现方法
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10045181.html
Copyright © 2011-2022 走看看