如何在datatable的每一行中添加编辑/删除按钮

相关文章推荐

大鼻子的海龟 · jq ...· 8 月前 ·

刀枪不入的匕首 · date (Transact-SQL) - ...· 1 年前 ·

好帅的橙子 · 使用代码图分析器查找潜在问题 - ...· 1 年前 ·

挂过科的葡萄 · layUI表单提交时，控制台出现$（...） ...· 2 年前 ·

 <!doctype html>
            <html class="no-js" lang="zxx">
                <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>
        <div class="adapt_area">
            <div class="container">
              <table id="newexample" class="table table-striped table-bordered table-light" style="width:100%">
                <thead>
                  <th>Name</th>
                  <th>Subject</th>
                  <th>Year</th>
              </thead>
            </table>
        </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>

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

$(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[0],data[1] ....

 $(document).ready(function() {
      $('#newexample').dataTable({      
        "bProcessing": true,
        "sAjaxSource": "fetchdata.php",
        "aoColumns": [
              { mData: 'title' } ,
              { mData: 'name' },
              { mData: 'year_name' },
                 mData: '',
                 render: (data,type,row) => {

如何在datatable的每一行中添加编辑/删除按钮 内容来源于 Stack Overflow，遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持 腾讯云小微IT领域专用引擎提供翻译支持

2 个回答