如何在数据表的每一行中添加编辑/删除按钮答案

【问题标题】：how to add edit/delete buttons in each row of datatable如何在数据表的每一行中添加编辑/删除按钮
【发布时间】：2021-02-08 02:29:33
【问题描述】：

我创建了一个数据表，现在我需要编辑和删除表中的记录，所以我想在年份列旁边添加删除和编辑按钮。该列名称应作为操作。

操作列应位于年份列旁边，并且应包含删除编辑按钮。

index.html

 <!doctype html>
            <html class="no-js" lang="zxx">
            
            <head>                
                <title>index</title>                
            
                <link rel="stylesheet" href="css/bootstrap.min.css"> 
                <link rel="stylesheet" href="fontawesome-free-5.14.0-web\css\all.css">
            
            </head>
            <body>
        <div class="adapt_area">
            <div class="container">
        
              <table id="newexample" class="table table-striped table-bordered table-light" style="width:100%">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Subject</th>
                  <th>Year</th>
                </tr>
              </thead>
            </table>
        
            </div>
        </div>  
    
        </body>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>        
   
    <script src="js/bootstrap.min.js"></script>    

   
    <script type="text/javascript">
      $(document).ready(function() {
          $('#newexample').dataTable({      
            "bProcessing": true,
            "sAjaxSource": "fetchdata.php",
            "aoColumns": [
                  { mData: 'title' } ,
                  { mData: 'name' },
                  { mData: 'year_name' }
                ],
          });
      });
    </script>
    
    </html>

fetchdata.php

    <?php
    require 'db_connection.php';  
    
    $query = "SELECT notes.title,subject.name,year.year_name from notes
              INNER JOIN subject ON notes.subject=subject.id
              INNER JOIN year ON subject.year=year.id";
    $result = $conn->query($query);
    
    $data=array();
    while($row = $result->fetch_array(MYSQLI_ASSOC)){
      $data[] = $row;
    }
    
    $results = ["sEcho" => 1,
              "iTotalRecords" => count($data),
              "iTotalDisplayRecords" => count($data),
              "aaData" => $data ];
    
    echo json_encode($results);    
     ?>

【问题讨论】：

您可以使用 DataTable createdRow 属性在空操作列中添加编辑/删除按钮（包括 columnDef 中的空列）。这样你可以在按钮中添加行 UID，这将更容易触发点击动作。

标签： javascript php html json datatable

【解决方案1】：

您可以在文档中使用此示例：

$(document).ready(function() {
    var table = $('#newexample').dataTable( {
        "ajax": "fetchdata.php",
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button id="edit">edit</button>"
        } ]
    } );
 
    $('#newexample tbody').on( 'click', '#edit', function () {
        //the job
    } );
} );

所以要检索数据，您可以使用它：

var data = table.row(this).data();

而data是一个数组，用来访问数据使用：

data[0],data[1] ....

【讨论】：

它的工作。但我怎样才能得到每个记录的 id？因为它需要删除和编辑记录。
是的，我把它作为一个解决方案。按钮出现在每一行。但我不知道如何获取每条记录的 id。
什么的id ??
每条记录的id。标识要编辑或删除的行。
您可以像从 php 中传递隐藏行一样传递 id，然后在 js 中您可以通过 table.row(this).data(); 获取 id（隐藏行）；当点击按钮时。

【解决方案2】：

对于更新和删除按钮，你需要一个 ID，我假设数据库上的 ID 将命名为 id

 $(document).ready(function() {
      $('#newexample').dataTable({      
        "bProcessing": true,
        "sAjaxSource": "fetchdata.php",
        "aoColumns": [
              { mData: 'title' } ,
              { mData: 'name' },
              { mData: 'year_name' },
              { 
                 mData: '',
                 render: (data,type,row) => {
                   return `<a href='link_to_edit/${row.id}'>update</a>`;
                 }
              }
            ],
      });
  });

参考this

【讨论】：