Question

在我的搜索结果中，我只看到th，但td根本没有呈现。我的数据没问题。我想我错误地建了我的桌子。

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'

table_html += '<tbody>'

$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        console.log(result.details);

        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })

    },
    error:function(err){

    }
});

table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").empty().append(table_html);

Answer 1

这里的问题是success回调中的代码只有在收到AJAX响应后才会执行。所以执行的顺序是这样的：

表格的前半部分（<table>至<tbody>）已添加至table_html。
启动AJAX通话。
表格的后半部分（</tbody>至</table>）已添加至table_html。
由于table_html回调尚未执行，success，没有中间部分且数据的内容已附加到您的模态的。
一旦AJAX调用获得响应，就会执行success回调。它将表的中间部分（所有<tr>）添加到变量的末尾，但由于表已经附加，因此没有区别。

This帖子对该问题给出了一个很好的一般性解释。

在您的情况下，您可以像这样解决问题：

//Append an empty table.
var table_html = '<table id="my_table">';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'
table_html += '<tbody>'
//This row will show a loading message.
//It will be removed once the actual content has loaded.
table_html += '<tr><td colspan=2>Loading content...</td></tr>'
table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").html(table_html);

//Do the AJAX call.
$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        //This code will only run when you get the AJAX response.
        //Create the inner part of the table.
        var tr_html = "";
        $.each(result.details, function(i,obj){
            i = i + 1;
            tr_html += '<tr>'
            tr_html += '<td>'+i+'</td>'
            tr_html += '<td>'+obj.name+'</td>'
            tr_html += '</tr>'
        })
        //Append the inner part to the table.
        //This will overwrite the tr with the loading message we added earlier.
        $("#my_table tbody").html(tr_html);
    }
});

Disclaimar：我还没有测试过这段代码。

Answer 2

$ .ajax方法是异步的，所以你可以试试

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'

table_html += '<tbody>'

$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })
        table_html += '</tbody></table>'
        $("#myModal .modal-body").empty().append(table_html);
    },
    error:function(err){

    }
});

使用$ .each和AJAX的表构建仅包含th和no td

2 个答案: