jquery将click事件绑定到类? datatables ajax从标记中删除行

时间:2011-11-16 17:14:51

标签: jquery jquery-datatables

我正在使用Datatables并且在一个有两列的表中,第二列与类.deletecomp有一个文本链接,当单击时ajax会删除数据库中的条目,但我无法刷新表。

我添加了// Test delete tr注释下面的代码,当我单击表中的任何tr时,它会删除该行并刷新表。将触发AJAX并删除db表中的条目。如何更改此功能以使用具有.deletecomp类

的删除文本链接

这就是我初始化表格的方式

    oTableVC = $('#viewcomp').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
            "aoColumns": [ 
            null,
            null
            ]
    } 
    );
    //Test delete tr
    $("#viewcomp tbody tr").live('click', function () {
        oTableVC.fnDeleteRow( this );
    });

});

这是删除db条目的AJAX

$(".deletecomp").live('click', function(event){
    event.preventDefault();
    cidstring = $(this).attr("id");
    cidArr = cidstring.split("-");
    cid = cidArr[1];
    var url = 'http://domain.com/ajaxdeletecomp?format=json';

    $.post(url, { id: cid},function(ajaxdata) {
        //deleting row from table

        });
    });

1 个答案:

答案 0 :(得分:0)

之前我没有使用过这个插件;但是根据您的代码,以下应该可以解决问题:

// Needs to be declared in the the JS Document outside of any functions //
var oTableVC = $('#viewcomp').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
    "aoColumns": [ 
        null,
        null
        ]
    } 
);


$(".deletecomp").live('click', function(event){
    event.preventDefault();
    cidstring = $(this).attr("id");
    cidArr = cidstring.split("-");
    cid = cidArr[1];
    var url = 'http://domain.com/ajaxdeletecomp?format=json';
    var $target = $(this).closest('tr'); // Add Reference </tr> of Link

    $.post(url, { id: cid},function(ajaxdata) {
        //deleting row from table
        oTableVC.fnDeleteRow( $target ); // Deletes Row
    });
});

我希望这有帮助!