Question

我有下一个html表，我想用ajax请求的结果填充： table t_extension

 <table id="t_extension" class="table table-striped">
     <thead>
             <tr>
                 <th>Extension</th>
                 <th>Name</th>
                 <th>Action</th>
             </tr>
     </thead>
   </table>

我通过ajax调用api

$.ajax(
    {   
        type: "GET",
        url: 'https://164.132.84.147:55331/123456/pbx/extension/listall',
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        cache: false,
        success: function(data)
        {   
            console.log(data);

        }
    });

通过ajax的api调用给出了一个数组[8]，其中包含一些具有attributs扩展名和名称的对象

我想用调用api的ajax请求的结果填充t_extension表。我编写了下一个代码来填充表格，帮助讨论这一点的不同论坛。

$.ajax(
    {   
        type: "GET",
        url: 'https://164.132.84.147:55331/123456/pbx/extension/listall',
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        cache: false,
        success: function(data)
        {               
            $('#t_extension').append(
                $.map(data.Extension, function (extension, index) {
                return '<tr><td>' + extension + '</td><td>' + data.Name[index] + '</td></tr>';
            }).join());
        } ,

        error: function (msg)
        {            
                    alert(msg.responseText);
                }
    });

但它没有工作，表格没有填充。

Answer 1

您必须先将<tbody>附加到table，然后将您的<tr>...</tr>工作人员从ajax请求附加到<tbody>

您的HTML：

 <table id="t_extension" class="table table-striped">
     <thead>
             <tr>
                 <th>Extension</th>
                 <th>Name</th>
                 <th>Action</th>
             </tr>
     </thead>
     <tbody></tbody>
   </table>

您的append：

$('#t_extension > tbody').append(...);

如何使用请求ajax的结果填充html表

1 个答案: