如何将带有按钮的列添加到由MySQL DB中的数据填充的引导表中?

时间:2017-06-02 19:49:32

标签: javascript jquery html css twitter-bootstrap

我有一个引导表,显示从MySQL DB加载的数据。我想添加一个带按钮的列,使其看起来与此图像类似。

enter image description here

但是,我不知道如何在我的脚本中添加按钮。当我“手动”创建表格时,我可以轻松地执行此操作:

<table  id="table"
   data-show-columns="true"
   data-height="460">
</table>

但是当我使用来自DB的数据填充表时,创建表的逻辑会发生变化。这是我的代码:

list.php

用于加载数据的脚本(我不提供<script type="text/javascript"> var $table = $('#table'); $table.bootstrapTable({ url: 'include/list.php', search: true, pagination: true, buttonsClass: 'primary', showFooter: true, minimumCountColumns: 2, columns: [{ field: 'id', title: 'ID', sortable: true, },{ field: 'creation_date', title: 'Date', sortable: true, },{ field: 'latitude', title: 'Latitude', sortable: true, }, ], }); </script> ,因为它只包含用于连接到DB并提交SELECT查询的PHP脚本):

print

2 个答案:

答案 0 :(得分:1)

这就是你需要的一切

$('#table tbody tr').append('<td><a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a></td>');

答案 1 :(得分:0)

我自己使用以下方法解决了这个问题:

    <?php
      include_once 'include/connect_db.php';

      $query = "SELECT * FROM base;";
      $result = execute_query($query);

      $list = array();
      while ($b = mysqli_fetch_array($result)) {
        $list[] = $b;
      }
    ?>

<table id="table-b" class="table table-striped projects">
<thead>
  <tr>
    <th style="width: 1%">#</th>
    <th style="width: 10%">ID de base/th>
    <th>Fecha de registro</th>
    <th>Latitud</th>
    <th>Longitud</th>
    <th style="width: 20%"></th>
  </tr>
</thead>
<tbody>
  <?php foreach ($list as $row):?>
  <tr>
    <td><?php echo $row['ID'];?></td>
    <td><?php echo $row['creation_date'];?></td>
    <td><?php echo $row['latitude'];?></td>
    <td><?php echo $row['longitude'];?></td>
    <td>
      <a href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </a>
      <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
    </td>
  </tr>
  <?php endforeach;?>
</tbody>
</table>


        <script>
             $(document).ready(function(){
                      $('#table-b').dataTable({
                      "sPaginationType":"full_numbers",
                      "aaSorting":[[0, "asc"]],
                      "bJQueryUI":true
                      });

                      hideLoading();

             });
        </script>