大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

bootstraptable.js动态填充单元格数据的方法有哪些-创新互联

这篇文章主要为大家展示了“bootstrap table.js动态填充单元格数据的方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“bootstrap table.js动态填充单元格数据的方法有哪些”这篇文章吧。

创新互联是一家网站设计、成都网站制作,提供网页设计,网站设计,网站制作,建网站,按需开发,网站开发公司,公司2013年成立是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。

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,同时将后台获取的数据动态的填充到相应的单元格   function createShowingTable(data) {     //获取后台传过来的jsonData,并进行解析       //此处需要让其动态的生成一个table并填充数据     var tableStr = "";     var len = data.workers.length;     for (var i = 0; i < len; i++) {       tableStr = tableStr + "" + data.workers[i].address           + "" + "" + data.workers[i].state + ""           + "" + data.cores + ""           + "" + data.coresUsed + ""           + "" + data.memory + ""           + "" + data.memoryUsed + "";     }     //将动态生成的table添加的事先隐藏的div中.     $("#dataTable").html(tableStr);   }

以上是“bootstrap table.js动态填充单元格数据的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:bootstraptable.js动态填充单元格数据的方法有哪些-创新互联
本文地址:http://dzwzjz.com/article/djcgjo.html