php - 如何在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>

您所要做的就是在每个按钮单击中绑定(bind)事件来执行所需的操作。我希望它能为您提供运行该功能的想法。干杯!

<小时/>

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

我从他们的 中获取了一些代码片段(用于内联编辑)给你一些更多的想法:

// 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