如何使用 jquery 数据表插件删除当前行

Posted 2023-05-07

【中文标题】如何使用 jquery 数据表插件删除当前行

【英文标题】：How to delete current row with jquery datatable plugin

【发布时间】：2010-12-27 22:12:21

【问题描述】：

我在使用 jQuery 数据表插件的表格中有一个带有按钮的列。按钮说“删除”，意思是当您单击该按钮时，它会删除表中的当前行。

当我调用 fnDeleteRow 时，它似乎第一次工作，但该行没有更多时间，所以看起来它并没有真正正确地删除该行。

【问题讨论】：

需要更多信息。您是使用 ajax 填充数据表还是转换静态 html 表？另外：为什么数据不再准确？数据表不会在排序时移动 tr （和相应的 id 标签）吗？

【参考方案1】：

试试这个：

var row = $(this).closest("tr").get(0);
oTable.fnDeleteRow(oTable.fnGetPosition(row));

如果不起作用，请检查以下example

【讨论】：

+1 但我认为最接近的选择器比父母更合适

我确实将它切换到最接近但之后它完美运行..谢谢

最后 :) 非常感谢。这是唯一对我有用的解决方案

【参考方案2】：

假设您附加了一个在用户单击按钮时要调用的函数。函数应该是这样的

function DeleteRow(event)

  //get the row of the cell that is clicked
  var $row = $(this).parents("tr").eq(0)
  //if you need the id you can get it as
  var rowid = $row.attr("id");
  //now you can call delete function on this row
  $row.delete(); 

【参考方案3】：

这个怎么样：

    // Delete Row
    $('.glyphicon-minus').on("click", function() 
        configTable.row($(this).closest("tr").get(0)).remove().draw();
    );

【参考方案4】：

来自this page：

$('#example tbody td').click( function () 
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition( this );

    //...
 );

【讨论】：

但我点击了表格单元格内的按钮

【参考方案5】：

这就是我的工作方式。在文档就绪函数中，我将转换后的 HTML 表版本分配给一个变量，当单击其中的一个按钮时，我使用 JQuery 遍历父/子，并将您获得的行作为参数发送到库的 fnDeleteRow() 函数。

这是来自库函数的 cmets。还有一个图书馆里提到的例子。

/**
* Remove a row for the table
*  @param mixed target The index of the row from aoData to be deleted, or
*    the TR element you want to delete
*  @param function|null [callBack] Callback function
*  @param bool [redraw=true] Redraw the table or not
*  @returns array The row that was deleted
*  @dtopt API
*  @deprecated Since v1.10
*
*  @example
*    $(document).ready(function() 
*      var oTable = $('#example').dataTable();
*
*      // Immediately remove the first row
*      oTable.fnDeleteRow( 0 );
*     );
*/

// And here's how it worked for me.
var oTable;
$("document").ready(function () 
    oTable = $("#myTable").dataTable();
);

//Remove/Delete button's click.
$("a[name='deleteColumn']").click(function () 
    var $row = $(this).parent().parent();
    oTable.fnDeleteRow($row);
);