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>");
    	}
    }
    
  • 相关阅读:
    URAL 1998 The old Padawan 二分
    URAL 1997 Those are not the droids you're looking for 二分图最大匹配
    URAL 1995 Illegal spices 贪心构造
    URAL 1993 This cheeseburger you don't need 模拟题
    URAL 1992 CVS
    URAL 1991 The battle near the swamp 水题
    Codeforces Beta Round #92 (Div. 1 Only) A. Prime Permutation 暴力
    Codeforces Beta Round #7 D. Palindrome Degree hash
    Codeforces Beta Round #7 C. Line Exgcd
    Codeforces Beta Round #7 B. Memory Manager 模拟题
  • 原文地址:https://www.cnblogs.com/yonyong/p/11299020.html
Copyright © 2011-2022 走看看