CODEWITHSUNDEEP
jquery-uijqueryjquery-pluginsdatatables
Asim Zaidi
Asim Zaidi

Reputation: 28354

get a column click in dataTables plugin instead of row

I have the following code that works great for row click, but I want the first and last column to be clickable and I want to be able to tell which column was clicked. I have the following code

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

});

the code here is the row click

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

what can I do for a cell click and get info.

using jquery plugin dataTables thanks

Upvotes: 1

Views: 9615

Answers (3)

thejustv
thejustv

Reputation: 2035

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

for more refer this link

Upvotes: 0

dejobo
dejobo

Reputation: 113

Just specify a column number instead of first, last, etc. The example below shows column 12. zero is first. It's easier that way. 

td:eq(11)

Upvotes: 2

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

When you do it $('#submit tbody td ').click(function() ... you bind click event to the td.
So, to get the first and last column click use the following:

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

demo1

updated 1: Get last two columns:

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

demo2

update 2: Get each column data on click last two columns

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

demo3

Upvotes: 6

Related Questions