how to add edit/delete buttons in each row of datatable

I create a datatable, now I need to edit and delete the records in the table so I want to add delete and edit button next to year column. that column name should be as action.

Action column should be next to the year column and that should contain delete edit buttons.

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-webcssall.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>

JavaScript
​x
 
 <!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-webcssall.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);    
     ?>

JavaScript
 
    <?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);         ?>​

Answer

well for update and delete button , you need an ID, i assumed the id on database will named as 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>`;
                 }
              }
            ],
      });
  });

JavaScript
 
 $(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>`;                 }              }            ],      });  });​

reference this

Advertisement

Answer