如何使用jquery datatable插件删除当前行

时间:2021-12-15 20:31:17

I have a column with buttons in a table I'm using jQuery datatable plugin. The buttons say "Remove" and the idea is that when you click on that button it deletes the current row in the table.

我有一个在表中有按钮的列,我使用的是jQuery datatable插件。按钮上写着“移除”,其思想是当你点击那个按钮时,它会删除表格中的当前行。

When I call fnDeleteRow it seems to work the first time but no any further time for that row so it looks like its not really deleting the row properly.

当我调用fnDeleteRow时,它似乎是第一次起作用,但是对于这一行没有任何时间了,所以看起来它并没有正确地删除这一行。

5 个解决方案

#1


61  

Try this:

试试这个:

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

If it doesn't work, check the following example

如果它不工作,请检查以下示例

#2


2  

Let's say you attached a function to be called when the user clicks on the button. The function would be something like this

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

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


1  

How about this:

这个怎么样:

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

#4


0  

from this page:

从这个页面:

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

    //...
} );

#5


0  

This is how it works for me. In document ready function I assign converted version of HTML table to a variable and when a button in the is clicked I go through parents/childs with JQuery and send the row you get as a parameter to the library's fnDeleteRow() function.

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

Here's is the comments from the library function. And an example that's mentioned in library.

下面是库函数的注释。这是库中提到的一个例子。

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

#1


61  

Try this:

试试这个:

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

If it doesn't work, check the following example

如果它不工作,请检查以下示例

#2


2  

Let's say you attached a function to be called when the user clicks on the button. The function would be something like this

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

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


1  

How about this:

这个怎么样:

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

#4


0  

from this page:

从这个页面:

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

    //...
} );

#5


0  

This is how it works for me. In document ready function I assign converted version of HTML table to a variable and when a button in the is clicked I go through parents/childs with JQuery and send the row you get as a parameter to the library's fnDeleteRow() function.

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

Here's is the comments from the library function. And an example that's mentioned in library.

下面是库函数的注释。这是库中提到的一个例子。

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