javascript – 如何使用Ajax和footable_redraw将新行填充到Footable

我正在尝试添加来自Ajax的记录作为响应.我的代码如下;

Ps：我可以正确地看到带有警报命令的ajax响应.

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>

数据为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代码

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

解决方法

在将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/',success : function(data) {
        $.each(data,function(index,item){
            var row = create_seller_table_row(item);
            $('table tbody').append(row);
        });

        $('table').trigger('footable_initialize');
    },error) { 
        alert("Error! Could not retrieve the data.");
    }
});

然后使用footable_initialize触发器而不是footable_redraw触发器.

这是它的jsfiddle.