jquery - 如何重新初始化已加载的 Bootstrap 表？

Question

我有一个加载了一些数据的 table table-bordered table-hover table-stripped 表格。我用 ajax 重新加载行，表格变得丑陋，失去了表格边框、表格悬停和表格剥离 Bootstrap 类的所有属性。我怎样才能重新加载这些属性？它与 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 包装器。在大多数浏览器上，如果您没有明确定义一个，它会自动为您在内部包裹一个。

如果您检查页面生成的代码，您会注意到存在您未在原始 html 中指定的 tbody。

当您使用 .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);