文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在json中为datatable中的每个Tab显示硬币？

问如何在json中为datatable中的每个Tab显示硬币？
EN

Stack Overflow用户

提问于 2018-02-18 02:24:59

回答 1查看 154关注 0票数 0

你好，我试图在每个选项卡中显示json数据，使用datatable，有人能告诉我如何做到这一点吗？

我试着看谷歌--没有运气

我喜欢像这样的dynamic&stacked=h

但是使用datatable和它自己的硬币列表，比如json文件中的btc第一个选项卡等等。

编辑stacey给我的代码，它不显示它只是显示一个像下面的图片一样的空白页面，除非它的java脚本？但在json中需要吗？

https://i.stack.imgur.com/jp6w5.jpg

list.json

 [{"coinlist",
"Bitcoin faucets":
"faucet name":"btc Faucet",
 "minutes": "5",
 "amount": "90",
 "claim link": "http://bitcoinsfaucets.com",
         // next faucet off bitcoin goes here!
   },
{
  "eth faucets": 
"faucet name":"eth Faucet",
 "minutes": "15",
 "amount": "1000",
 "claim link": "http://ethwebsite.com",
  // next faucet off eth goes here!
   },
{
  "bitcore faucets":
"faucet name":"bitcore Faucet",
 "minutes": "24",
 "amount": "5000",
 "claim link": "http://bitcorefaucets.com",
         // next faucet off bitcore goes here!
   },
{

"primecoin faucets": 

"faucet name":"prime Faucet",

 "minutes": "55",

 "amount": "3000",

 "claim link": "http://primecoinfaucets.com",

         // next faucet off primecoin goes here!

  ]
 }
]

数据表

<table id=“list” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">

  <thead>
                <tr>
                <th>name</th>
                <th>timer</th>
                <th>amount</th>
                <th>cliam link</th>
                </tr>
                </thead>
                <tfoot>      
        </tfoot>



        </table>  
</div>

javascript

  <script type="text/javascript">
   $(document).ready(function() {
   $(‘#list’).DataTable();
      } );            
  </script>

sorting

tabs

javascript

php

json

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-18 04:57:14

我修复了您的数据，但这只是一个非常基本的开始，您可以使用这个示例来构建您正在寻找的东西--但是您需要阅读Javascript对象和键--这样您就知道如何使用！你可以试着读像这样的东西-- Objects。

var data = {
	"coinlist": {
		"bitcoin_faucets": {
			"faucet_name": "btc Faucet",
			"minutes": "5",
			"amount": "90",
			"claim_link": "http://bitcoinsfaucets.com"
		},
		"eth_faucets": {
			"faucet_name": "eth Faucet",
			"minutes": "15",
			"amount": "1000",
			"claim_link": "http://ethwebsite.com"
		},
		"bitcore_faucets": {
			"faucet_name": "bitcore Faucet",
			"minutes": "24",
			"amount": "5000",
			"claim_link": "http://bitcorefaucets.com"
		},
		"primecoin_faucets": {
			"faucet_name": "prime Faucet",
			"minutes": "55",
			"amount": "3000",
			"claim_link": "http://primecoinfaucets.com"
		}
	}
}

$('document').ready(function(){
   var links = document.getElementsByTagName('a');
   var i = 0;
   for (coin in data.coinlist) {
     links[i].innerHTML = coin; 
     i++;
   }
  $('li > a').click(function(){
    var table = $('#list')
    var type = $(this).data('type');
    var name = $(this).text().replace(' ','_')
    var the_data = data.coinlist[name];
    
    for (sub in the_data) {
        console.log('sub '+sub)
        var field = the_data[sub]
        $('#'+sub).find('span').text(field)
        if (sub == 'faucet_name' || sub == 'claim_link') {
          var newlink = the_data['claim_link'];
         // console.log(newlink)
          $('#'+sub).find('a').prop('href',newlink)
        }
     }

    console.log('type '+name)
    
    $('#content'+type).append(table)
    $('table').css('display', 'block')
  })   
    $('li > a').first().trigger('click');
})

table {
  display:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Coin Lists</h2>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" data-type="1" href="#home">Home</a></li>
    <li><a data-toggle="tab" data-type="2" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" data-type="3" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" data-type="4" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3 id="title1"></h3>
      <div id="content1"></div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3 id="title2"></h3>
       <div id="content2"></div>
    <div id="menu3" class="tab-pane fade">
      <h3 id="title3"></h3>
       <div id="content3"></div>
    </div>
    <div id="menu4" class="tab-pane fade">
       <h3 id="title4"></h3>
       <div id="content4"></div>
    </div>
  </div>
</div>

</body>
</html>



<table id=“list” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th id="faucet_name"><a href=""><span></span></a></th>
      <th id="minutes"><span></span></th>
      <th id="amount"><span></span></th>
      <th id="claim_link"><a href=""><span></span></a></th>
    </tr>
    </thead>
    <tfoot>      
  </tfoot>

</table>  
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48847877

复制

相似问题

问如何在json中为datatable中的每个Tab显示硬币？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在json中为datatable中的每个Tab显示硬币？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在json中为datatable中的每个Tab显示硬币？
EN