Bootstrap table not recognizing rows generated using AJAX

Question

For reference : I'm working with Bootstrap-table using Bootstrap v3.3.6 I'm trying to populate my table using AJAX and jQuery, but the problem is that when i do so none of bootstrap extensions seems to work with those rows.

I'm working on a data table using some extensions as the following :

`<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>

`

If i'm filling the table using PHP everything seems to be working fine, by 'everything' i mean displaying data as well as the automatically added attributes to table rows as adding a chekbox in the first <td> and data-index attribute for every column in every row.

However, filling the table using AJAX only fills the table with data and there is no interaction between the table and its rows, no bootstrap-table attributes or checkboxes are added as well as no extensions seems to be working with those rows (for example export, rows selection ...)

For more detail :

• When embedding PHP code into table columns:

source code :

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 } ?>

Generated code by 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>

• When generating rows dynamically using AJAX :

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

  • jQuery function used :

  $(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); } } }) });

I want the result to be the same as when i embed php inside each column in my table, i don't even know why i'm having this issue, i need some help.

Answer 1

Have you tried using their method for loading JSON instead of your own jQuery?

From: https://bootstrap-table-docs3.wenzhixin.net.cn/getting-started/#usage-via-javascript

"We can also use remote URL data by setting 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>

If you don't want to use their supplied method then maybe try adding the classes and data-index etc. that you see in the bootstrapped table to the table you're generating...

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>';

though I don't think that will get you working... it should at least style things correctly. You'll need to use a way that gets everything pulled into the DOM correctly. I'd try using Bootstrap-table's method for loading JSON they have supplied above. You might have to create a PHP script that takes some arguments and returns properly formatted JSON for their method to work.