template and pagination

Posted 2021-01-23 norazhang

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

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>