刚开始,在没有使用这个模板之前,一致都是后台返回一个json的字符串,来在前端自己拼接字符串,不但麻烦,而且费时费力,而且还有时候经常拼接错误!导致了工作效率的延长
js模板的使用
<script type="html" id="temp">
{{if data.flag}}
{{each data.info as value i}}
<tr>
<td><span>{{value.name}}</span></td>
<td><span>{{value.mobile}}</span></td>
<td><span class="color333">{{value.company_name}}</span></td>
<td><span>{{value.linkman}}</span></td>
<td><span>{{value.create_time}}</span></td>
</tr>
{{/each}}
<tr>
<td colspan="5">
共<span>{{data.PageAllNum}}</span>页/第<span>{{data.PageNum}}</span>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{{if data.prev}}<span onclick='PageJump(this,"{{data.prev}}","{{data.card_section}}")'>上一页</span>{{/if}}
{{if data.next}}<span onclick='PageJump(this,"{{data.next}}","{{data.card_section}}")'>下一页</span>{{/if}}
</td>
</tr>
{{/if}}
</script>

返回的json数据格式

{
"pageNum": 1,
"AllPageNum": 1,
"info": [
{
"id": "35",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
},
{
"id": "8",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
}
],
"flag": true,
"pid": "42"
}

ajax时的代码使用

function PageJump(obj,page,card){
$.ajax({
url:"/admin.php/User/vip_people_card",
type:"GET",
data:{PageNum:page,card_section:card},
dataType:"json",
success:function(msg){
console.log(msg);
var html = template('temp', {data: msg});
$(obj).parents('.tbody').html(html);
}
})
}

注:中的temp必须和

这个保持一致,type也不能为空,也不可以为"text/javascript"

artTemplate-master的应用的更多相关文章

  1. art-template模板应用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. http服务&ajax编程

    http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...

  3. SongTaste音乐下载器

    SongTaste音乐下载器 Songtaste是一个非常好的音乐推荐网站, 奈何和duomi搅合在一起, 导致下载音乐非常的麻烦, 现在写了一个简单的"下载器", 通过它可以下载 ...

  4. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

  5. artTemplate教程

    artTemplate教程 官方文档 一个简单的例子 <!DOCTYPE html> <html lang="zh"> <head> <m ...

  6. JData 整合ArtTemplate的前端框架

    因为项目需要和自己的兴趣,几个月前结合模板解析神速的ArtTemplate,自己写了个框架取名JData,多多指教啊---因为一直没时间写文档,为了能够更方便地使用和避免我把代码忘了,今天抽空把文档写 ...

  7. art-template模板渲染及其过滤器

    原生语法 使用原生语法,需要导入template-native.js文件.在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失. <script id="tpl&qu ...

  8. artTemplate模版引擎的使用

    artTemplate: template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不 ...

  9. xamarin MasterDetailPage点击Master时卡顿现象

    在很多项目中经常会使用到MasterDetailPage的布局方式,而且一般做为主页面来开发,在开发中,发现一个并不算Bug的问题,但是却发生了,以此记录下来,方便大家探讨. 现象是这样的,我开发了一 ...

  10. backup3:master 数据库的备份和还原

    在SQL Server 中,master 数据库记录系统级别的元数据,例如,logon accounts, endpoints, linked servers, and system configur ...

随机推荐

  1. SpringMVC拦截器的使用

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  2. Gulp基础

    1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...

  3. orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子

    1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...

  4. Android之下拉刷新的ListView

    不废话,代码里面注释很详细,直接上代码: 自定义的RefreshableListView代码: public class RefreshableListView extends ListView im ...

  5. sql注入时易被忽略的语法技巧以及二次注入

    那些容易被忽略.容易被弄错的地方 sql注入时的技巧 ========================================================================= ...

  6. 关于li元素嵌套的事儿

    今天阅读<锋利的jQuery>第二版2.6节案例研究部分的时候,遇到一个问题. <ul> <li class="a1"><a href=& ...

  7. KMP学习之旅

    说起kmp就要从字符串的匹配说起,下面我们谈谈字符串的匹配 给定一个原字符串:bababababababababb,再给定一个模式串:bababb,求模式串是否在源字符串中出现 最简单的方法就是遍历源 ...

  8. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

  9. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

  10. Eclipse使用技巧

    1,整体缩进 右缩进:选中+Tab 左缩进:选中+ Shift+Tab 2,Ctrl+O列出当前类所有方法和属性