如何重新初始化已加载的引导表？

Question

我有一个table table-bordered table-hover table-stripped表加载了一些数据。 我使用ajax重新加载行，表变得丑陋，失去了表格边框，表格悬停和表格剥离引导类的所有属性。 如何重新加载这些属性？它是否带有JS？

编辑： 以下是代码。

表：

<table class="table table-bordered table-hover table-stripped" id="data_list"> 
    <tr> 
     <th>Lot</th> 
     <th>size</th> 
    </tr> 
    <?php foreach ($lots as $lot): ?> 
     <tr> 
      <td><?php echo $lot['id']; ?></td> 
      <td><?php echo $lot['size']; ?></td> 
     </tr> 
    <?php endforeach ?> 
</table> 

JS：

... 
$.ajax({type: "POST",cache: false,url: '?', dataType: "html", data: submitdata, 
    success: function(res) { 
     $('#data_list').html(res); 
    }, 
    error: function(xhr, ajaxOptions, thrownError) { 
     bootbox.alert("There was an error, try again. "+thrownError); 
    }, 
    async: true 
}); 

AJAX响应：

<tr> 
    <th>Lot</th> 
    <th>Size</th> 
</tr> 
<tr> 
    <td>38706000524</td> 
    <td>30</td> 
</tr> 

Answer 1

的table元素需要tbody包装其内部。在大多数浏览器中，如果你没有明确定义一个，它会自动为你包装一个内部。

如果你检查你的页面生成的代码，你会注意到有一个tbody礼物，你没有在你的原始html中指定。

当您使用.html()替换内容时，浏览器不执行自动换行，因此您将丢失tbody。

您应该返回一个作为您的服务器代码的一部分，并更新您的原始代码。

<table class="table table-bordered table-hover table-stripped" id="data_list"> 
    <tbody> 
     <tr> 
      <th>Lot</th> 
      <th>size</th> 
     </tr> 
     <?php foreach ($lots as $lot): ?> 
      <tr> 
       <td><?php echo $lot['id']; ?></td> 
       <td><?php echo $lot['size']; ?></td> 
      </tr> 
     <?php endforeach ?> 
    </tbody> 
</table> 

或添加一个在您的原代码，并更改.html()替换代码是

$('#data_list tbody').html(res); 

Answer 2

我可以计算它。当表格被加载时，引导程序将容器添加到容器中。如果稍后修改表格，则不得覆盖该元素。

我改变了我的Ajax响应从

<tr> 
    <th>Lot</th> 
    <th>Size</th> 
</tr> 
<tr> 
    <td>38706000524</td> 
    <td>30</td> 
</tr> 

到

<tbody> 
    <tr> 
     <th>Lot</th> 
     <th>Size</th> 
    </tr> 
    <tr> 
     <td>38706000524</td> 
     <td>30</td> 
    </tr> 
</tbody>