dot.js 填充table数据

html

<table border="1">
    <tr>
        <td></td>
        <td>缩略图</td>
        <td>名称</td>
        <td>价格</td>
    </tr>
    <tbody id="tableRows"></tbody>
</table>

<script id="gridTemp" type="text/x-dot-template">
{{~it:value:index}}
    <tr>
        <td><input type="checkbox" value="{{= value.id}}"/></td>
        <td><img src="{{= value.img }}" width="200px"/></td>
        <td>{{= value.name }}</td>
        <td>{{= value.price }}</td>
    </tr>
{{~}}
    </script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/doT.js"></script>


<script type="text/javascript">

function init(){

    $.ajax({   
           url:'goods/list',   
           type:'post',   
           dataType:'json',//服务器端返回的数据格式是json
           data: {
           },//发给服务器端的数据
           success:function(res){   //data:服务器端返回给浏览器端的数据
                   if(res.code==0){
                       //编译模板
                       var interation = doT.template( $('#gridTemp').html() );
                       //将数据显示到网页中
                       $( '#tableRows' ).html(interation( res.data )); 
                   }else{
                       alert(res.msg);
                   }
           },
           error:function (XMLHttpRequest, textStatus, errorThrown) {
                       alert(XMLHttpRequest);
                       alert(textStatus);
                       alert(errorThrown);
           }

       });
}
window.onload=init;
</script>

数据格式

{"data":[{"id":"29f26dd1fded49ec8843ca99f7a0a818","name":"asdfasdf","descrip":"","price":0,"tags":"","selling1":"","selling2":"","selling3":"","createTime":"Oct 2, 2020 5:34:37 PM","updateTime":"Oct 2, 2020 5:34:37 PM"},{"id":"fba5223daa184df0b84588d65ad3d5e7","img":"/lvyou/upload/1641f00d355847edacf4ac9fb7d8b565.png","name":"测试","descrip":"非打死对方","price":0,"tags":"234123,哈哈","selling1":"1234","selling2":"啊的说法","selling3":"asdfasdf","createTime":"Oct 2, 2020 7:56:40 PM","updateTime":"Oct 2, 2020 7:56:40 PM"},{"id":"86037a66d4514f1f973d0854897227fe","img":"upload/136c3f29cc974c3caa437a1be8f2cfa0.png","name":"2015","descrip":"asdfasdf","price":0,"tags":"安委发","selling1":"安委发","selling2":"","selling3":"","createTime":"Oct 2, 2020 8:15:53 PM","updateTime":"Oct 2, 2020 8:15:53 PM"}],"code":0}

原文出处:/show_1EF6MqKruVRU.html