引导表无法识别使用 AJAX 生成的行

Posted 2023-05-08

【中文标题】引导表无法识别使用 AJAX 生成的行

【英文标题】：Bootstrap table not recognizing rows generated using AJAX

【发布时间】：2019-06-23 03:31:58

【问题描述】：

供参考： 我正在使用 Bootstrap v3.3.6 与 Bootstrap-table 合作 我正在尝试使用 AJAX 和 jQuery 填充我的表，但问题是当我这样做时，似乎没有任何引导扩展适用于这些行。

我正在使用一些扩展来处理数据表，如下所示：

`<table id="table" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
<thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th>ID</th>
        <th>ISBN</th>
        <th>Description</th>
    </tr>
</thead>
<tbody id="books-data">
   <!-- table data rows to be inserted here -->
</tbody>

`

如果我使用 PHP 填充表格，一切似乎都工作正常，“一切”是指显示数据以及自动添加到表格行的属性，因为在每一行每一列的第一个 <td> 和 data-index 属性。

但是，使用 AJAX 填充表格只会用数据填充表格，表格与其行之间没有交互，没有添加引导表属性或复选框，似乎也没有扩展处理这些行（例如导出、行选择...）

更多详情：

将

PHP

代码嵌入表格列时：

源代码：

while ($row = mysqli_fetch_array($result)) ?>
        <tr>
            <td></td>
            <td><?php echo $row['id'] ?></td>
            <td><?php echo $row['isbn']; ?></td>
            <td><?php echo $row['description']; ?></td>
        </tr>
    <?php  ?>

bootstrap-table 生成的代码：

<tr data-index="0">
    <td class="bs-checkbox ">
        <input data-index="0" name="btSelectItem" type="checkbox">
    </td>
    <td style>
        <!-- data -->
    </td>
    <td style> <!-- the same thing... --> </td>
</tr>

使用 AJAX 动态生成行时：

<tr>
    <td></td>
    <td><!-- data --></td>
    <td><!-- data --></td>
    <td><!-- data --></td>
</tr>

使用的jQuery函数：

$(function() $.ajax( url:"fetch_books.php", method:"POST", dataType:"json", success:function(data) for(let count=0; count<data.length; count++) let html_data = '<tr><td></td>'; html_data += '<td>'+data[count].id_livre+'</td>'; $('#books-data').append(html_data); ) );

我希望结果与我在表格的每一列中嵌入 php 时的结果相同，我什至不知道为什么会出现这个问题，我需要一些帮助。

【问题讨论】：

您可能有一些代码在页面首次加载时调用bootstrap-table，这就是向表中添加额外属性的原因。您需要找到某种方法在 Ajax 成功函数中调用该事件处理程序（或类似的处理程序）。

我没有使用javascript调用bootstrap-table，只需添加data-toggle="table"即可激活它

嗯，一定是有什么东西在调用初始化函数……

我不会使用 jQuery 的追加，而是阅读文档并使用他们的原生追加：bootstrap-table-examples3.wenzhixin.net.cn/#methods/append.html

根据 bootstrap-table 文档here 有两种方法可以激活 bootstrap table，第一种是“无需编写 JavaScript 即可激活 bootstrap table。在普通表上设置 data-toggle="table"。 "第二个，如果使用 javascript 并使用$('#table').bootstrapTable(columns: [...]); 启动表，我正在使用第一种方法。

【参考方案1】：

您是否尝试过使用他们的方法来加载 JSON 而不是您自己的 jQuery？

发件人：https://bootstrap-table-docs3.wenzhixin.net.cn/getting-started/#usage-via-javascript

"我们也可以通过设置url:'data1.json'来使用远程URL数据。

$('#table').bootstrapTable(
  url: 'data1.json',
  columns: [
    field: 'id',
    title: 'Item ID'
  , 
    field: 'name',
    title: 'Item Name'
  , 
    field: 'price',
    title: 'Item Price'
  , ]
);

<table id="table"></table>

如果您不想使用他们提供的方法，那么可以尝试将您在引导表中看到的类和数据索引等添加到您正在生成的表中......

let html_data = '<tr><td></td>'; 

=>

let html_data = '<tr data-index="0"><td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>';

虽然我认为这不会让你工作......它至少应该正确地设置样式。您需要使用一种方法将所有内容正确地拉入 DOM。我会尝试使用 Bootstrap-table 的方法来加载他们在上面提供的 JSON。您可能必须创建一个 PHP 脚本，该脚本接受一些参数并返回格式正确的 JSON 以使其方法正常工作。

【讨论】：

我尝试手动添加属性，但正如你所说，它不起作用，我研究了他们加载 JSON 的方法，但正如我在评论中所说，我想完全控制插入的内容而不仅仅是简单地放置 json 数据，例如将一些列内容包装在 <div> 标记中，或者对一些数据进行一些测试并根据它们的值显示其他信息，我不知道如何使用这种方法来做到这一点.