Question

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

我认为使用$(document).ready和带有$(window).load的displaynig表上传数据会有所帮助，但事实并非如此。

我将非常感谢任何建议：）

            $(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>

Answer 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();
            }
          );
        });

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

1 个答案: