zoukankan      html  css  js  c++  java
  • 表格数据js初始绑定

    html调用js文件,js初始化时发送Ajax请求,获取页面数据将其写入在html页面上展示

    html

    <div class="card-body">
        <!-- 表格实例代码 -->
        <div style="height:38em">
        <table id="listmap1" class="table table-hover">
        	<thead>
        		<tr>
        			<th class="checkRadioBox" style="30px;">
        				<!-- input 的ID必须为唯一的;ID必须与abel for="checkbox_all" for的值对应  -->
        
        				<input type="checkbox" id="checkbox_all" name="message" class="chk_1"  />
        
        				<label for="checkbox_all"></label>
        			</th> 
        			<th class="text-center" style="20%">批次号</th>
        			<th class="text-center" style="10%">申请人</th>
        			<th class="text-center" style="10%">状态</th>
        			<th class="text-center" style="10%">总数</th>
        			<th class="text-center" style="10%">推送成功</th>
        			<th class="text-center" style="10%">推送未完成</th>
        			<th class="text-center" style="20%">申请时间</th>
        			<th class="text-center" style="10%">操作</th>
        		</tr>
        	</thead>
        	
        	<!--存放数据的地方-->
        	<tbody style="min-height: 500px;" id="tbody1">
        		
        	</tbody>
        </table>
        </div>
        <!--  引入js文件,用来调用里面的初始化方法为表格赋初值 -->
         <script type="text/javascript" src="${contextPath}/js/rwsqs/list1.js"></script>
    </div>
    

    js文件

    <!--被引入时先初始化,初始化时发送Ajax获取想要的表格数据并调用addhtml1方法,将数据展示出来-->
    $(function() {
       $.ajax({
           type : 'POST';
           url : basepath + '/getInfo';
           data : {
               "page" : 1,
               "rows" : 10
           },
           success : function(data){
               addhtml1(data)
           }
       }); 
    }
    
    <!--在页面上展示数据-->
    function addhtml1(data){
        $("#tbody1").html("");
    	for(var i=0;i<data.rows.length;i++){
    	 $("#tbody1").append("<tr>" 
    		 +"<td scope='checkRadioBox'><input type='checkbox' name='ch1' id='ch1-"+data.rows[i].batch+"' value='"+data.rows[i].batch+"' class='chk_1'  />"
    
    		 +"<label for='ch1-"+data.rows[i].batch+"'></label>"
    		 +"</td>"
    		 +"<td><a href='javascript:;'>"+data.rows[i].batch+"</a></td>"
    		 +"<td class='text-center'>"+data.rows[i].apply_name+"</td>"
    		 +"<td class='text-center'>"+data.rows[i].state+"</td>"
    		 +"<td class='text-center'>"+data.rows[i].size+"</td>"
    		 +"<td class='text-center'>"+data.rows[i].oksize+"</td>"
    		 +"<td class='text-center'>"+data.rows[i].nosize+"</td>"
    		 +"<td class='text-center'>"+data.rows[i].createTime+"</td>"
    		 +"<td class='text-center'>"
    		 +"</td>"
    		 +"</tr>");
    	}
    }
    
  • 相关阅读:
    偶的机机升级了
    质疑 Sina.com 的金牌榜[图文]
    一道JAVA作业题
    北京出差总结
    我拿什么奉献给你
    CSDN无限极树PHP+MySQL版
    极大强连通分量的Tarjan算法
    NOI2001 炮兵阵地详解
    单调队列及其应用
    some english website
  • 原文地址:https://www.cnblogs.com/yonyong/p/11299020.html
Copyright © 2011-2022 走看看