如何为jQuery dataTables中的每个数据创建动态编辑和删除选项

Question

以下是我的HTML表代码：

<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
<thead>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</thead>
<tbody></tbody>
<tfoot>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</tfoot>

​

这是我使用的jQuery代码：

$(document).on('mouseover', '#datatable-buttons tbody tr', function()
        {
            $(this).addClass('bg-show');
            $(this).mouseout(function()
                {
                    if($(this).hasClass('bg-show'))
                        {
                            $(this).removeClass('bg-show');
                        }
                });

            $(this).children(":last").html("<i class='glyphicon glyphicon-edit edit'></i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'></i>");
        });

    $(document).on('click', '#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit', function()
        {
            var specificValue = $(this).children(":first").text();
            alert("Edit Clicked For "+specificValue);
        });

通过使用这段代码，我可以在DataTable的最后一个元素中显示编辑和点击图标，但是我面临两个问题。

1.)我希望对datatable中存在的用于编辑和删除的每个数据执行特定操作。

2.)显示的“编辑”和“删除”按钮保持不变--它们不会再次还原薪资字段中存在的值。

我已经通过JSON格式将数据转储到dataTables中。

Answer 1

我已经在您的代码中做了一些更改，但是它现在应该可以实现您想要的功能。

在您的“悬停tr函数”中，您用按钮替换了工资值，我重写了代码，以便它在工资td之后添加按钮

在您的Edit单击中，您有一个tr td td i.glyphicon，注意您有两个td，这是一个太多了。

还可以使用.closest()获取第一个td的文本，如$(this).closest("tr").children(":first").text();中的

​

$(document).on('mouseover', '#datatable-buttons tbody tr', function() {
  $(this).addClass('bg-show');
  $(this).mouseout(function() {
    if ($(this).hasClass('bg-show')) {
      $(this).removeClass('bg-show');
    }
  });

  $(this).children(":last:not(.custom)").after("<td class='custom'><i class='glyphicon glyphicon-edit edit'>edit</i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'>delete</i></td>");
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function() {
  var specificValue = $(this).closest("tr").children(":first").text();
  alert("Edit Clicked For " + specificValue);
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function() {
  $(this).closest("tr").remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </tfoot>

​

Answer 2

向<tr>添加一个属性，该属性标识标记中的数据。您只需在构建每一行时从数据中插入值即可。

<tbody>
    <tr id="1">
        ...
    </tr>
</tbody>

单击图标(编辑/垃圾图标)时，可以使用此值针对要处理的数据。

$("#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit").on("click", function () 
{
    var dataId = $(this)parent("tr").attr("id");

    // Populate data for the edit form and show that form.
}