引导表无法在 Ajax 响应中显示 json 数据

Question

我遇到了一个奇怪的问题。我有来自服务器的成功 json 响应。我需要在我的引导表中显示。但不幸的是，我无法在引导表中显示 Json 数据。我正在使用 AJAX 来请求数据。

下面是我的代码

<script>
              $.ajax({
                  type: 'POST', 
                  url:  'data/searchtransaction.php', 
                  data: 'startDate='+startDate+'&endDate='+endDate, 
              })
              // using the done promise callback
              .done(function(result) {
                  $('#searchResult').bootstrapTable({
                      data: result
                  });
              });
 </script>

这是我的 HTML 代码，它是简单的表格

<table 
   id="searchResult"
   data-pagination="true">
   <thead>
     <tr>
       <th data-field="receiver_name" data-sortable="true">Receiver Name</th>
       <th data-field="receiver_phone" data-sortable="false">Receiver Phone</th>
       <th data-field="createdAt" data-sortable="false">Created At</th>
     </tr>
   </thead>
</table>

以下是我的回复

[{"receiver_name":"UNK","receiver_phone":"022847120069","createdAt":"2017-05-03 12:34:45"},{"receiver_name":"UNK","receiver_phone":"022820709041","createdAt":"2017-05-03 13:32:24"},{"receiver_name":"UNK","receiver_phone":"022820708047","createdAt":"2017-05-03 13:33:14"}]

有问题的是，我的最终输出在 result 变量中，如果我将 result 变量放入，那么它什么也没有显示，甚至没有任何错误。例如

.done(function(result) {
   $('#searchResult').bootstrapTable({
       data: result
   });
});

但是，如果我将直接 Json 放在 Data 中，它就会显示出来。例如

.done(function(result) {
       $('#searchResult').bootstrapTable({
           data: [{"receiver_name":"UNK","receiver_phone":"022847120069","createdAt":"2017-05-03 12:34:45"},{"receiver_name":"UNK","receiver_phone":"022820709041","createdAt":"2017-05-03 13:32:24"},{"receiver_name":"UNK","receiver_phone":"022820708047","createdAt":"2017-05-03 13:33:14"}]
       });
    });

i 事件尝试解析数据但也没有成功。解析如下

.done(function(result) {
   var parsedJson = $.parseJSON(result);
   $('#searchResult').bootstrapTable({
       data: parsedJson
   });
});

这是我的完整代码：

<script type="text/javascript">
          $(function() {

              var start = moment(); //moment().subtract(29, 'days');
              var end = moment();

              $('#reportrange').daterangepicker({
                  startDate: start,
                  endDate: end,
                  ranges: {
                     'Today': [moment(), moment()],
                     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                     'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                     'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                     'This Month': [moment().startOf('month'), moment().endOf('month')],
                     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                  }

              },cb);

              cb(start, end);

              function cb(start, end) {
                  $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                  var startDate = start.format('YYYY-MM-DD'); 
                  var endDate = end.format('YYYY-MM-DD');

                  $.ajax({
                      type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                      url:  'data/searchtransaction.php', // the url where we want to POST
                      data: {   
                              'startDate':startDate,
                              'endDate':endDate
                            }, 
                  })
                  // using the done promise callback
                  .done(function(result) {
                      var parsedJson = $.parseJSON(result);

                      $('#searchResult').bootstrapTable({
                          data: parsedJson
                      });
                  });
              }

          });
          </script>

这是我的 HTML 代码

<table id="searchResult" data-pagination="true">
  <thead>
    <tr>
     <th data-field="receiver_name" data-sortable="true">Receiver Name</th>
     <th data-field="receiver_phone" data-sortable="false">Receiver Phone</th>
     <th data-field="createdAt" data-sortable="false">Created At</th>
    </tr>
  </thead>
</table>

因此需要社区帮助来解决问题。

谢谢

Answer 1

你能在成功函数中尝试Append()数据吗，这是我的示例代码，它非常适合我。

$.ajax({
    type: "POST",
    url: "resources/php/LetterManage.php",
    data: {loadRecentTable: true},
    success: function (data) {

        var recentTable = JSON.parse(data).recentTable;
        $('#recent_insert_table tbody').empty();
        $.each(recentTable, function (index, element) {

            $('#recent_insert_table tbody').append("<tr><td>" + element[0] + "</td><td>" + element[1] +
                    "</td><td>" + element[2] + "</td><td>" + element[3] + "</td></tr>");

        });
    }

});