jquery-ui - 在 dataTables 插件中单击列而不是行

Question

我有以下代码非常适合行点击，但我希望第一列和最后一列是可点击的，并且我希望能够知道点击了哪一列。我有以下代码

$(document).ready(function() {
    oTable = $('#mytable').dataTable();
    var fa = 0;
    $('#submit tbody td ').click(function() {
    var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);


    });
    function rowClick() {
        fa = this;
        var id  = $("td:eq(1)", this).text();
        cardNumber = $.trim(id);    
        $.ajax({
            url : 'myurltopostto',
            type : 'POST',
            data : {
                id  :   id

            },
            success : function(data) {
                oTable.fnDraw(); //wanted to update here
            },
            error : function() {
                console.log('error');
            }
        });
    }

});

这里的代码是行点击

var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);

我可以做些什么来点击单元格并获取信息。

使用 jquery 插件 dataTables 谢谢

Answer 1

当你这样做时，$('#submit tbody td ').click(function() ...你将点击事件绑定到td.
因此，要获取第一列和最后一列，请单击使用以下命令：

$('td:first, td:last', '#submit tbody tr').on('click', function() {
    // do what you want
});

演示1

更新 1：获取最后两列：

jQuery('#mytable tr').each(function() {
    jQuery('td', this).slice(-2).on('click', function() {
        // do what you want
    });
});

演示2

更新2：点击最后两列获取每列数据

jQuery('#mytable tr').each(function() {
    jQuery('td', this).slice(-2).on('click', function() {
        // do what you want
        var $columns = jQuery(this).siblings('td').andSelf();
        jQuery.each($columns, function(i, item) {
            alert(jQuery(item).html());
        });
    });
});

演示3

Answer 2

只需指定列号而不是第一个、最后一个等。下面的示例显示第 12 列。零是第一个。这样更容易。

td:eq(11)

Answer 3

$(document).ready(function() {
    var table = $('#tableID').DataTable();

    $('#tableID').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

有关更多信息，请参阅此链接