如何使用jQuery DataTable插件删除当前行

2021/01/06 07:51 · jquery ·  · 0评论

我在使用jQuery datatable插件的表中有一列带有按钮的列。按钮说“删除”,其想法是当您单击该按钮时,它会删除表中的当前行。

当我打电话时,fnDeleteRow它似乎是第一次工作,但该行没有任何进一步的时间,因此看起来好像并没有真正删除该行。

尝试这个:

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

如果不起作用,请检查以下示例

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

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(); 
}

这个怎么样:

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

从此页面

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

    //...
} );

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

这是库函数的注释。还有库中提到的示例。

/**
* 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);
});
本文地址:http://jquery.askforanswer.com/ruheshiyongjquery-datatablechajianshanchudangqianxing.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!