带有 Bootstrap 和 JSON 数据的可排序表答案

【问题标题】：Sortable table with Bootstrap and JSON data带有 Bootstrap 和 JSON 数据的可排序表
【发布时间】：2016-03-06 15:16:44
【问题描述】：

我正在使用 jQuery 读取 JSON 数据，然后我想使用 Bootstrap 在可排序表中显示它们。我的问题是 Bootstrap 看不到我的 JSON 数据。它们显示在表格中，但是当我想对它们进行排序时-它们消失了，就像它们从未去过那里一样，我读到“表格中没有可用数据”。

我认为使用$(document).ready 上传数据并使用$(window).load 显示nig 表会有所帮助，但它没有。

如果有任何建议，我将不胜感激：)

            $(document).ready(function () {
               
                var url = "http://www.w3schools.com/website/customers_mysql.php";
                $.getJSON(url,
                function (json) {
                    var tr;
                    for (var i = 0; i < json.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + json[i].Name + "</td>");
                        tr.append("<td>" + json[i].City + "</td>");
                        tr.append("<td>" + json[i].Country + "</td>");
                        $('#table-content').append(tr);
                    }
                });
            });
            
            $(window).load(function() {		
                $('#myTable').DataTable();
            });

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        
<!--data tables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!--data tables -->
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
        
      <table id="myTable" class="table table-striped table-bordered" >
            <thead>
                <tr>
                    <th>Name</th>
                    <th>city</th>
                    <th>country</th>
                </tr>
            </thead> 
            <tbody id="table-content"> 
            </tbody>
        </table>

【问题讨论】：

请问，有什么想法吗？ :)

标签： json twitter-bootstrap sorting datatables html-table

【解决方案1】：

在收到 JSON 数据后尝试执行DataTable() 初始化函数，因为您可以签入http://jsfiddle.net/zetxek/v2ge88xw/2/。

            $(document).ready(function() {

          var url = "http://www.w3schools.com/js/customers_mysql.php";
          $.getJSON(url,
            function(json) {
              var tr;
              for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].Name + "</td>");
                tr.append("<td>" + json[i].City + "</td>");
                tr.append("<td>" + json[i].Country + "</td>");
                $('#table-content').append(tr);
              }

              $('#myTable').DataTable();
            }
          );
        });

【讨论】：