表格数据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="width: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="width:20%">批次号</th>
                <th class="text-center" style="width:10%">申请人</th>
                <th class="text-center" style="width:10%">状态</th>
                <th class="text-center" style="width:10%">总数</th>
                <th class="text-center" style="width:10%">推送成功</th>
                <th class="text-center" style="width:10%">推送未完成</th>
                <th class="text-center" style="width:20%">申请时间</th>
                <th class="text-center" style="width: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>");
    }
}

转载于:https://www.cnblogs.com/yonyong/p/11299020.html