Таблица начальной загрузки не распознает строки, созданные с использованием AJAX

Question

Для справки: я работаю с Bootstrap-таблицей, используя Bootstrap v3.3.6. Я пытаюсь заполнить свою таблицу, используя 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 } ?>

Сгенерированный код по загрузочной таблице:

<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 в каждый столбец таблицы, я даже не знаю, почему у меня возникла эта проблема, мне нужна помощь.

Answer 1

Вы пытались использовать их метод для загрузки JSON вместо собственного JQuery?

От: https://bootstrap-table-docs3.wenzhixin.net.cn/getting-started/

Msgstr "Мы также можем использовать данные удалённого URL, установив url: 'data1.json'.

$('#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, чтобы их метод работал.