如何在 Jquery DataTable 中添加编辑和打印按钮？

Question

我使用 AJax 和 PHP 在我的 html 页面中成功安装了数据表：

$("#btn_ca_vanrental").click(function(){
    var oTable= $('#jsontable_vanrental').dataTable(); 
    $.ajax({
        url: 'proc_php/get_vanrental.php',
        dataType: 'json',
        success: function(s){
            oTable.fnClearTable();
            for(var i = 0; i < s.length; i++) {
             oTable.fnAddData([
                        s[i][0],
                        s[i][1],
                        s[i][2],
                        s[i][3]                                     
                               ]);                                      
            } // End For                                            
        },
        error: function(e){
           alert(e.responseText);   
        }
        });
}); 

这是我的 PHP：

<?php
    require_once('../connection/auth.php');
    require_once('../connection/connection.php');

    $query = mysql_query("select id,date_filed,purpose,total from tblcasalaryform");
    while($fetch = mysql_fetch_array($query))
        {
        $output[] = array ($fetch[0],$fetch[1],$fetch[2],$fetch[3]);
    }
    echo json_encode($output);
?>

到目前为止，它工作正常，但我想为用户添加另一个表列，以便用户可以选择编辑和打印特定条目。如何？

这是我的 HTML：

<table id="jsontable_salary" class="display table table-bordered table-hover" cellspacing="0">
    <thead>
        <tr width="5%">
            <th>ID</th>
            <th>Date</th>
            <th>Purpose</th>
            <th>Total</th>
        </tr>
    </thead>             
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Date</th>
            <th>Purpose</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>

Answer 1

去年我能够在非常有限的时间内为一个项目使用 DataTables，它非常方便，但有点让人不知所措。

只是为了给你一个想法，我使用了'columnDefs' 或只是 DataTables 中的“columns”属性来呈现我的数据，像这样：

/* Init DataTables */
var oTable = $('#myTable').DataTable({
  "data": <?= $data;?>,
  // ... some more configurations here
  "columnDefs": [
    {
      data: null,
      className: 'actions-column', // Class to lookup to in Html table for insert
      searchable: false,
      "render": function(data, type, row) { // Available data available for you within the row
        return "<a href='#' class='print-button'>Print</a>&nbsp;<a href='#' class='edit-button'>Edit</a>";
      }
    }
  ]
});

在我的 Html 中存在“actions-column”：

<table id="myTable">
  <thead>
    <tr>
      <!-- ... some more th here -->
      <th class="actions-column"></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

您所要做的就是在每个按钮单击中绑定事件以执行所需的操作。我希望它能给你一个想法来实现功能。干杯！

---

顺便说一句，关于编辑，有一个名为 Editor 的扩展程序，它可以让您通过多种方式编辑一行，但恐怕它不是免费的。

我从他们的 中获取了一些代码 sn-p（用于内联编辑），为您提供更多想法：

// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
  editor.inline( this );
} );

对于打印和其他数据导入/保存，他们也有Table Tools