好资源导航 » 文章资讯 » bootstrap table.js动态填充单元格数据的多种方法

bootstrap table.js动态填充单元格数据的多种方法

2023-08-19 00:28:06 80

bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：

方法一：全部自动填充table

$('#table-javascript').bootstrapTable({ method:'get', url:ContextUtil.zutnlp_spark_info, cache:false, pagination:true, root:'workers', total:'totalElements', sidePagination:'server', columns:[{ field:'address', title:'Address', align:'center', valign:'middle' },{ field:'state', title:'State', align:'center', valign:'middle', }] }); $(window).resize(function(){ $('#table-javascript').bootstrapTable('resetView'); });

方法二：表头这一栏固定，自动填充主体部分


















Address
States
Cores
CoresUsed
Memory
MemoryUsed

$(function(){ $.ajax({ url:ContextUtil.zutnlp_spark_info, type:"GET", success:function(data){ //调用创建表和填充动态填充数据的方法. createShowingTable(data) }, error:function(){ } }); }); //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格 functioncreateShowingTable(data){ //获取后台传过来的jsonData,并进行解析 //此处需要让其动态的生成一个table并填充数据 vartableStr=""; varlen=data.workers.length; for(vari=0;i"+data.workers[i].address +""+""+data.workers[i].state+"" +""+data.cores+"" +""+data.coresUsed+"" +""+data.memory+"" +""+data.memoryUsed+""; } //将动态生成的table添加的事先隐藏的div中. $("#dataTable").html(tableStr); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

bootstrap table.js动态填充单元格数据的多种方法

热门推荐

随机推荐