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

View Original

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

Answer

Solution:

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>`;
                 }
              }
            ],
      });
  });

reference this

Answer

Solution:

you can use this example in the documentation :

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

so to retrieve data you can use this :

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

and data is an array to access data use :

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

Source