如何为数据表中的每个选项卡在 json 中显示硬币？ [关闭]答案

【问题标题】：How to display coins in json for each Tab in datatable? [closed]如何为数据表中的每个选项卡在 json 中显示硬币？ [关闭]
【发布时间】：2018-02-18 02:24:59
【问题描述】：

您好，我正在尝试在每个选项卡和数据表中显示 json 数据谁能告诉我该怎么做？

我尝试在谷歌上查找没有运气

我喜欢这样 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

但有数据表和它自己的硬币列表，如 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>

【问题讨论】：

嗨！如果您签出代码中的How to create a Minimal, Complete, and Verifiable example 以备将来在堆栈溢出时使用会更好。 -谢谢
你的数据很乱，不是一个有效的数组...

标签： javascript php json sorting tabs

【解决方案1】：

我修复了您的数据，但这只是一个非常基本的开始，您可以将此作为示例来构建您正在寻找的内容 - 但您需要阅读有关 Javascript 对象和键的信息 - 这样您就知道如何使用 create有效的数据对象！您可以尝试阅读类似的内容 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_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>

【讨论】：

嗨 Stacey 感谢您抽出宝贵的时间来帮助我，这是我现在需要的，它显示在代码 sn-p 预览中，但是当我将它复制到我自己的时，它不会显示它只是空白@ 987654322@
不客气，我不认为您复制了所有内容 - 当我查看源代码时您的 JS 并且您的数据丢失 - 请确保链接您的脚本文件！
嗨 Stacey 我也可以在 json 中使用它吗？因为我需要它用于管理面板的 json 文件，因为我找到了这个 stackoverflow.com/questions/38301457/… 。
是的，这应该没问题 - 只需确保您的 JSON 有效！尝试将 JSON 文件发布到 github 或其他地方，您可以在此处进行测试。
好的，我将如何在 json 文件中使用该代码？把它贴在那里？还有最后一件事我需要问它很简单，但你知道一个地方我可以看到如何在选项卡中添加超链接到按钮，只需使用链接再次感谢