jquery-tmpl 比较好用;具体是啥就百度吧,这里不做详细解释,直接上代码秒懂!
需要引用jquery.tmpl.js:
<script src="/tc_vsmp/view/assets/js/loan/jquery.tmpl.js"></script>
页面代码:
数据是通过ajax返回过来的data对象,数据类型 json数据
<script id="recordsData" type="text/x-jquery-tmpl">
<tr><td class="table-check"><input name="subBox" type="checkbox"></td>
<td class="col-id">{{if id}} {{= id}} {{else}} -- {{/if}}</td>
<td>{{= customer_name}}</td>
<td>{{if id}} {{= amount}} {{else}} -- {{/if}}</td>
<td>{{if id}} {{= left_account}} {{else}} -- {{/if}}</td>
<td>{{if id}} {{= ((new Date(credit_date)).toLocaleDateString().replace(/\//g,'-'))}}({{= credit_operator}})
{{else}} --
{{/if}}
</td>
<td>{{= salesman}}</td>
<td>{{= score}}</td>
<td>
<a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn" onclick="toview({{if id}} {{= id}} {{else}} '' {{/if}},{{= b_id}})"><span class="am-icon-eye""></span> 详情 </a>
{{if status==2}}
<a href="javascript:void(0);" class="am-btn am-btn-success edit-detail-btn" onclick="toedit('{{= id}}','{{= customer_name}}','{{= amount}}','{{= b_id}}')"><span class="am-icon-archive"></span> 修改 </a>
<a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信额度 </a>
{{else}}
<a href="javascript:void(0);" class="am-btn am-btn-default edit-detail-btn" ><span class="am-icon-archive"></span> 修改 </a>
<a href="javascript:void(0);" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 授信额度 </a>
{{/if}}
</td>
</tr>
</script>
<script id="recordsPagi" type="text/x-jquery-tmpl">
<ul class="am-pagination">
<span>共有<span class="goodscount" id="count" style="color:red">{{= count}}</span>条数据,共
<span id="total" class="goodstotal" style="color:red">{{= total}}</span>页,当前第
<span id="currentPage" class="goodsnoenum" style="color:red">{{= currentPage}}</span>页</span>
{{if currentPage>1}}
<li><a id="pre" href="javascript:;" class="pre" >« 上一页</a></li>
{{/if}}
{{if currentPage<total}}
<li><a id="next" href="javascript:;" class="next" >下一页 »</a></li>
{{/if}}
<li><a class="topage" href="javascript:;" >跳转至</a></li>
<li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li>
<li><a href="javascript:;" class="lastNum" >尾页 </a></li>
</ul>
</script>
js代码:
function commitAjax(data,callback){
$.ajax({
type:"POST",
url:data.url,
data:data.param,
dataType:"json",
success:function(data){
setRecordsData(data.list);
setRecordsPagi(data);
if(callback!= undefined)
callback(data.resultCode);
},
error:function(data){
alert("获取数据异常!!!");
}
});
}
function setRecordsData(data){
$("#records-tbody").html("");
if(data==null||data==undefined||data==""){
$("#records-tbody").html("没有查到记录");
}else
$("#recordsData").tmpl(data).appendTo("#records-tbody");
}
function setRecordsPagi(data){
$("#records-pagi").html("");
$("#recordsPagi").tmpl(data).appendTo("#records-pagi");
}