如何重新初始化已加載的引導表？

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>