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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:05:43  来源:igfitidea点击:

How to populate new rows to Footable with use Ajax and footable_redraw

javascriptjqueryfootable

提问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 alertcommand 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