Bootstrap表无法在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> 

在此可以是简单的表

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

我下面的HTML代码是我的回应

[{"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"}] 

有问题的事情是，我最后输出是结果变量，如果我把结果变量，那么它什么也不显示，甚至没有任何错误。例如

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

但是如果我把直接的Json内部的数据就说明。例如

.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"}] 
     }); 
    }); 

我的事件试图解析数据，但也没有得到任何成功。解析像下面

.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>"); 

     }); 
    } 

});