jsrender页面数据的展示

来源:互联网 发布:《唯有落花知》 编辑:程序博客网 时间:2024/05/15 06:01

页面上面的代码:

首先引用

<link rel="stylesheet" type="text/css" href="jquery.pagination.css" />
<script type="text/javascript" src="jquery.pagination-1.2.3.js"></script>
<script type="text/javascript" src="jsrender/jsrender.min.js"></script>


显示的位置


   
      <div >
            数据展示
      </div>
      <ul>
      <li>
               <table width="100%"  id="mm6">
                    <tr>
                      <th align="center">字段1</th>
                      <th align="center">字段2</th>                                   
                      <th align="center">字段3</th>
                      <th align="center">字段4</th>      
                      <th align="center">字段5</th>
                    </tr>
              </table>
              </li>
              <li>
              <ul id="pager6" class="pager1"></ul> 
              </li>

</ul>
            </div>
       


<!--  渲染模板-->
<script id="page_tmp6" type="text/x-jsrender">
 <tr>
   <td align="center" >{{subString:mmName 8}}</td>
   <td align="center">{{:periods}}</td>
   <td align="center" >{{:yeaRate}}</td>
   <td align="center">{{:planPaymentsMoney}}</td>
   <td align="center">{{:intentDate}}</td>
</tr>
</script>



<!--截串-->

<script type="text/javascript">
$.views.converters("subString", function(val,num) {  
return  val.substr(0,num);  
});
</script>



<!--调用请求-->

<script type="text/javascript">
function addPage(params,showParams,stateParams){
$("#pager"+params).page({
    pageSize: 3,//每页展示的个数
    remote: {
        url: '${base}/action.do',  //请求地址
        params: {"show":showParams,"state":stateParams},
        callback: function (result) {
            var data=result.result;
             var tr=$("#mm"+params).find('tr')[0];
           $("#mm"+params).empty().append(tr).append($("#page_tmp"+params).render(data));
        }
    }
})
}
</script>

0 0
原创粉丝点击