javascript 如何使用 Ajax 和 footable_redraw 将新行填充到 Footable
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/25166373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to populate new rows to Footable with use Ajax and footable_redraw
提问by efkan
I'm trying to add records that's come from Ajax as respond. My codes are the following;
我正在尝试添加来自 Ajax 的记录作为响应。我的代码如下;
Ps: I can see ajax response with alert
command properly.
Ps:我可以alert
正确地看到带有命令的ajax响应。
Html codes
html代码
<table id="seller-table" class="table" data-filter="#filter" data-page-size="5">
<thead>
<tr>
<th data-toggle="true">ID</th>
<th>Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Data as json
数据为json
var data = [{"id": 10, "date": "Mon Aug 04 2014 17:00:00"},
{"id": 11, "date": "Tue Aug 05 2014 17:00:00"},
{"id": 12, "date": "Wed Aug 06 2014 17:00:00"}];
jQuery codes
jQuery 代码
$.ajax({
url : '/bid/find/',
data: { },
success : function(data) {
$('table tbody').append(data);
$('table').trigger('footable_redraw');
},
error : function(xhr, statusText, error) {
alert("Error! Could not retrieve the data.");
}
});
回答by Chris Laskey
The array of objects returned by the AJAX call has to be converted to HTML elements before they can be added to the table:
AJAX 调用返回的对象数组必须先转换为 HTML 元素,然后才能添加到表中:
$('table').footable();
function create_seller_table_row (item) {
var row = $('<tr><td>' + item.id + '</td><td>' + item.date + '</td></tr>');
return row;
}
$.ajax({
url : '/bid/find/',
data: { },
success : function(data) {
$.each(data, function(index, item){
var row = create_seller_table_row(item);
$('table tbody').append(row);
});
$('table').trigger('footable_initialize');
},
error : function(xhr, statusText, error) {
alert("Error! Could not retrieve the data.");
}
});
Then use the footable_initializetrigger instead of the footable_redraw one.
然后使用footable_initialize触发器而不是footable_redraw触发器。
Here's a jsfiddleof it in action.
这是它在行动中的jsfiddle。