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'或只是＆＃39; 列＆＃ 39; DataTables中的属性来呈现我的数据，如下所示：

＆＃13;

/* 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>";
      }
    }
  ]
});

＆＃13;

在我的Html中＆＃39; actions-column ＆＃39;存在：

＆＃13;

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

＆＃13;

您所要做的就是在每个按钮单击中绑定事件以执行所需操作。我希望它能让你了解功能。干杯！

顺便说一句，关于编辑，有一个名为Editor的扩展程序，它允许您通过多种方式编辑行，但我担心它不是免费的。

我从抓取了一些代码段（用于内联编辑），为您提供更多想法：

＆＃13;

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

＆＃13;

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

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

1 个答案: