Bootstrap表无法在Ajax响应中显示json数据
问题描述:
我正面临一个奇怪的问题。我有从服务器成功的json响应,我需要显示在我的引导表。但不幸的是,我无法显示引导表中的Json数据。我使用AJAX来请求数据。Bootstrap表无法在Ajax响应中显示json数据
下面是我的代码
<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>
所以需要社区帮助解决问题。
感谢
答
'+这个[' RECEIVER_NAME '] +''+这个[' receiver_phone '] +''+ this ['createdAt'] +' '); }); ' –
user344293
你可以尝试成功的功能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>");
});
}
});
+0
追加工作,但表看起来像非常丑陋。 – user344293
+0
这是它如何为我工作 'var obj = $ .parseJSON(result); $。每个(OBJ,函数(){ $( '#信息搜索结果TBODY')。追加(”
你可以试着用JSON.parse()解析吗? – luly
@ user7908029已经尝试,但那个也不起作用。 – user344293
你能够在控制台中获得响应吗? – Nagaraju