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>

  • 相关阅读:
    Docker03-镜像
    Docker02:Centos7.6安装Docker
    Docker01-重要概念
    WEB开发新人指南
    Lpad()和Rpad()函数
    Unable to find the requested .Net Framework Data Provider. It may not be installed
    redis自动过期
    redis简单的读写
    redis的安装
    Ajax缓存,减少后台服务器压力
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10045181.html
Copyright © 2011-2022 走看看