Question

请帮帮我。如何在以下jQuery DataTable中添加按钮？

＆＃13;

$('#myTable').dataTable({
  "ajax": {
    "url": "/Query/loadData",
    "type": "GET",
    "datatype": "json"
  },      
  "columns": [
    { "data": "Emp_Id", "autoWidth": true },
    { "data": "Email", "autoWidth": true },
    { "data": "Gen", "autoWidth": true },
    { "data": "EmpName", "autoWidth": true }
  ]
});

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <td>EmpId</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

您的代码不正确，jQuery DataTables定义中有4列，表头中有2列，表体中有1列。

如果您的数据是HTML格式，只需在相应的单元格中添加按钮代码（使用<a></a>，<input>或<button></button>）。

使用委托事件处理程序处理单击按钮。例如：

var table = $('#example').DataTable();

$('#example').on('click', '.btn', function(){
   // Get row data
   var data = table.row($(this).closest('tr')).data();

   alert('Name: ' +  data[0]);
});

请参阅this example以获取代码和演示。

我如何在jQuery DataTable中添加一个按钮？

1 个答案: