javascript

Question

583 votes

2 answers

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

Undefined asked

2022-04-14

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Similar questions

Find the answer in similar questions on our website.

279 javascript - How to make a backup of Database automatically once on clicking 'X' button of browser?

601 javascript - How to include HTML data (tags) as value in "arrayToDataTable" of Google Pie Chart?

176 javascript - How to properly change the url slug, without affecting the navigation "back" in the browser?

834 javascript - Slideshow in modal in a foreach statement

298 javascript - Error 500 When Updating MySql Database from WordPress - Same Code Works Fine Outside of WordPress

304 Problem with "PHP Warning: Trying to access array offset on value of type int in"

297 php - Group data in csv rows by one column and create comma-separated values from other columns within each group

286 php telegram bot api show rows of database in inline keyboard

189 javascript - Google Graph error Uncaught (in promise) Error: Column header row must be an array

864 php - Form is submitting only the final row data in a foreach loop, not the correct selection information

Undefined answered · Answer 1 · 2022-04-14

Answer

Solution:

well for update and delete button , you need an ID, i assumed the id on database will named asid

 $(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

Undefined answered · Answer 2 · 2022-04-14

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

Popular technologies

Latest questions:

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

Answer

Solution:

Answer

Solution:

Share

Didn't find the answer?

Similar questions

Write quick answer

About the technologies asked in this question

PHP

JQuery

MySQL

CSS

Bootstrap

HTML

Welcome to webdevask.com

Get answers to specific questions

Help Others Solve Their Issues