单击按钮时，获取并显示在数据表行中选择的模态数据库内容

Question

我有一个从db检索数据的数据表，我希望在行改进操作下实现一个模态弹出，所以改为显示我希望的实际改进操作，就像在该行下面的符号，所以当我点击它一个模态在所有其他数据保持不变的情况下出现改进操作，我想使用ajax实现这一点，但是在ajax中非常新手请协助。

<table class="table  table-hover   table-striped table-bordered datatable-basic"  >
                                        <thead>

                                            <tr>

                                                <tr class="bg-violet-400" >

                              <th>ID</th>
                                                <th>Site</th>
                                                <th>Date</th>
                                                <th>SN</th>
                                                <th>Gap identified</th>
                                                <th>Improvement Actions</th>
                                                <th>Timeline</th>
                                                <th>Person responsible</th>
                                                <th>Status</th>



                                            </tr>

                                        </thead>
                                        <tbody>
                         <?php
                          $connect = mysqli_connect("localhost", "root", "", "dqa");
                                        $query=mysqli_query($connect,"SELECT * FROM action_plan");

                                        while($row=mysqli_fetch_array($query))
                                        {
                                            ?>
                         <tr>
                         <td><?php echo $row['id'] ?></td>
                                     <td><?php echo $row['site'] ?></td>
                                     <td><?php echo $row['date'] ?></td>
                                      <td><?php echo $row['sn']  ?></td>
                                     <td><?php echo $row['gap_identified'] ?></td>
                                     <td><?php echo $row['Improvement_Actions'] ?></td>
                                     <td><?php echo $row['timeline'] ?></td>
                                     <td><?php echo $row['person_responsible'] ?></td>
                                     <td><?php if( $row['status'] == 1  )

                                     {
                                    echo '  <button type="button" class="btn bg-grey">Approved</button></span>';

                                    }


             elseif( $row['status'] == 0  ) {
                echo '  <button type="button" class="btn btn-danger">Active Action</button></span>';
                }
                elseif( $row['status'] == 2  ) {

                 echo ' <button type="button" class="btn bg-brown"> Resubmission </button></span>';

                }
                    elseif( $row['status'] == 3  ) {
                echo '  <button type="button" class="btn bg-orange">Action Due</button></span>';

            }


                         ?></td></td>


                                     </tr>

                                    <?php
                                        }



                                      ?>



                                        </tbody>
                                    </table>

                                </div>
                        </div>

Answer 1

如果没有任何样本数据或示例数据，我只能推测您要完成的任务。这是一个我认为你会发现有用的例子。

＆＃13;

＆＃13;

$(function() {
  $(".table").DataTable();
  $(".table tbody .actions").button({
    showLabel: false,
    icon: "ui-icon-extlink"
  }).click(function(e) {
    var self = $(this);
    var row = $(this).attr("href").substring(1);
    var siteurl = "<?php echo siteurl('improvement');?>";
    var form = $("<form>", {
      id: "form-" + row
    });
    form.append($("<input>", {
      type: "hidden",
      name: "rowid",
      value: row
    }));
    var dialog = $("<div>", {
      title: "Improvement Actions - Row " + row
    }).append(form).dialog({
      modal: true,
      create: function(e, ui) {
        $.getJSON(siteurl + "/" + row, function(data) {
          $('[name="rowid"]', this).val(data.id);
        });
      },
      close: function(e, ui) {
        self.data("results", form.serialize());
        dialog.dialog("destroy").remove();
      }
    });
  });
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table class="table table-hover table-striped table-bordered datatable-basic">
  <thead>
    <tr>
      <tr class="bg-violet-400">
        <th>ID</th>
        <th>Site</th>
        <th>Date</th>
        <th>SN</th>
        <th>Gap identified</th>
        <th>Improvement Actions</th>
        <th>Timeline</th>
        <th>Person responsible</th>
        <th>Status</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        LOC-1
      </td>
      <td>
        04/24/2018
      </td>
      <td>
        1001
      </td>
      <td>
        0.1
      </td>
      <td>
        <a href="#1" class="button actions">Improvement Actions</a>
      </td>
      <td>
        &nbsp;
      </td>
      <td>
        John Smith
      </td>
      <td>
        <button type="button" class="btn bg-grey">Approved</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

假设您正在使用DataTable，该表将填充来自PHP的各种数据，从而产生如上所示的HTML。然后，您可以使用jQuery UI对按钮进行编程以构建对话框。 .dialog()的回调事件之一是create，请参阅更多信息：http://api.jqueryui.com/dialog/#event-create

您可以在此时执行AJAX调用以获取此对话框的特定数据。在我的示例中，所有这些都是动态创建的，因此无需重置表单等。

我建议使用$.getJSON()，但您实施的$.ajax()代码没有任何问题。 $.getJSON()只是假设您正在对将返回JSON数据的资源执行GET调用。导致简化代码。

此示例的测试未完成，因为PHP脚本URL是假的或将是null。

希望有所帮助。