Develop Reference

How to get value from DataTables row on row click event

I have a HTML page with a DataTable (datatables.net) with data that is populated from the database. What I'm trying to accomplish is to be able click on a row in the datatable and when it's selected, store an ID value contained in the datatable into an array for later use. If a particular row is unselected, the array would be searched, and the matching ID value would be removed. Here is what I have tried so far. It seems to work sporadically:
$('#businessTable tbody').on('click', 'tr', function () {
var data = BusinessFileTable.row({ selected: true }).data();
if ($(this).hasClass('selected') == false) {
FullBusinessRecordIDs.push(data.BusinessID);
} else {
var index = FullBusinessRecordIDs.indexOf(data.BusinessID);
if (index > -1) {
FullBusinessRecordIDs.splice(index, 1);
}
}
});
Any suggestions on what I can do to improve on it? Does anyone know of a sample out there?

I think you should use the select extension and rebuild FullBusinessRecordIDs on each select / deselect event :
var FullBusinessRecordIDs = [];
$('#example').on('select.dt deselect.dt', function() {
FullBusinessRecordIDs = [];
table.rows({ selected: true }).every(function() {
FullBusinessRecordIDs.push( this.data().BusinessID )
})
//how as demo string
$('#ids').val( FullBusinessRecordIDs.toString() )
})
demo -> http://jsfiddle.net/4rnsq28s/

toggle row with specific attribute in jquery datatable on click

I'm new to jquery datatable.
What I'm trying to achieve is, to toggle(hide/show) the row of datatable which is having attribute named status_id with value 9 to 13 on button click.
I have tried this for only number 9, but it's not working.
var dTable = $('#tbl_taskList').DataTable();
$(document).on('click', '.hide-tasks', function (e) {
e.preventDefault();
var row = dTable.row($(this).attr('status_id'));
if(row === '9') {
dTable.row().hide();
}
});

There is no hide() feature for rows. Basically is what you are trying to do a specialized filter, so you could create a custom filter to achieve what you want. Here is an example of a toggleable filter which hide or shows <tr>'s with status_id 9 or 13 :
$('#hide-tasks').on('click', function (e) {
//is the checkbox checked?
if ($(this).is(':checked')) {
//add filter
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
//always go through the API when working with dataTables!
var status_id = parseInt(table.row(dataIndex).nodes().to$().attr('status_id'))
return !~[9,13].indexOf(status_id)
})
} else {
//reset filter
$.fn.dataTable.ext.search.pop()
}
//update table
table.draw()
})
demo -> http://jsfiddle.net/k1cz6rma/

Datatables docs says table.row hasn't hide fucntion but row().child() does.
var row = dTable.row(':eq('+$(this).attr('status_id')+')');
row.child().hide(); // hides
row.child().show(); // shows
checkout this page
row().child().hide()

Dynamic Modal Bootstrap

I have a table like:
When user selects Edit, it opens up a bootstrap Modal containing all td of the tr the Modal is launched from. What I've done so far is:
Get Row Index on Edit Click:
$(document).on('click', '#editNominHref', function(e) {
var global_edit_row = $(this).closest('tr').index();
$('#editNomiModal').modal('show');
});
What I want is:
$('#editNomiModal').on('show.bs.modal', function () {
$("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
// ..Similar for DOB, Relation and share%..
});
Question:
How do I pass the tr index from Edit.click to Modal.show function?

I don't believe you can pass data directly to the modal. However, you can use data attributes to modify the DOM which can then be read from the show.bs.modal event. Something like this:
$(document).on('click', '#editNominHref', function(e) {
$('#editNomiModal')
.data('row-index', $(this).closest('tr').index())
.modal('show');
});
$('#editNomiModal').on('show.bs.modal', function () {
var $tr = $('#myTable tr').eq($(this).data('row-index'));
var serial = $tr.find('td:eq(0)').text();
var name = $tr.find('td:eq(1)').text();
// and so on...
$("#Serial_field_of_Modal").val(serial);
$("#Name_field_of_Modal").val(name);
// and so on...
});

When you open the modal can't you just clone the <tr> and insert into modal-content?
$(document).on('click', '#editNominHref', function(e) {
var content = $(this).closest('tr').html();
$('#editNomiModal').find('modal-content').html(content).modal('show');
});
Obviously more formatting would be required.

Some questions around clone/copy TR

I have this code for clone/copy a tr element from a modal to a page.
$(function () {
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("input:checkbox").attr('checked', $toggle);
$('#btnAplicarNorma').prop('disabled', !$toggle);
});
$('#resultadoNormaBody').on('change', 'input[type=checkbox]', function () {
var $my_checkbox = $(this);
var $my_tr = $my_checkbox.closest('tr');
if ($my_checkbox.prop('checked')) {
$my_tr.addClass('copyMe');
}
var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
$all_checkboxes.each(function () {
if ($(this).prop('checked')) {
$('#btnAplicarNorma').prop('disabled', false);
return false;
}
$('#btnAplicarNorma').prop('disabled', true);
});
});
$('button#btnAplicarNorma').on('click', function (ev) {
var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe');
$('#tablaNorma').removeAttr('style');
$('#alertSinNorma').hide();
if ($tr_to_append.length) {
$tr_to_append.find('input[type=checkbox]').prop('checked', false);
$tr_to_append.clone().appendTo('#normaBody').removeClass('copyMe');
$tr_to_append.removeClass('copyMe');
$(this).prop('disabled', true);
}
});
});
But I'm having some issues:
If I mark all checkboxes using the first on the table head then I the code stop working and doesn't clone any tr even if all of them are marked
How do I avoid to clone/copy the same tr twice?
It's possible to modify the checkbox before clone it? If you take a look at the example you'll notice how the clone tr copy exactly as the one on the modal and I want to uncheck the checkbox first, it's possible?
Here is a fiddle to play with, any advice?

The main problem is that your checkboxes inside the table do not really get properly triggered when you programmatically set them selected. To make sure all associated Events get properly triggered you should be triggering a .click() event instead:
$("#resultadoNormaBody").find("input:checkbox").click();
to ensure that you don't end up with duplicate clones the easiest thing is to not clone all the rows in one batch, but iterate thru them, and comparing the html to the ones that have already been added like this:
//fetch all the rows that have already been cloned
var clonedRows = $("#normaBody").find("tr");
//iterate thru all the rows that have been checked
$.each($tr_to_append, function (i, v) {
var added = false;
//fetch their html (for easier compare)
var currentRowHtml = $(v).html();
//now compare against the rows that have already been cloned
$.each(clonedRows, function (i, cRow) {
var clonedRowHtml = $(cRow).html();
if (currentRowHtml == clonedRowHtml) {
added = true;
}
});
//if the row hasn't been added yet- go ahead and clone it now
if (!added) {
$(v).clone().appendTo('#normaBody').removeClass('copyMe');
}
});
Here's a link to your updated fiddle:
http://jsfiddle.net/wq51zL9x/4/
Here is some more info on comparing table rows: Compare two tables rows and remove if match
and here's the more elaborate answer to using .click()
Need checkbox change event to respond to change of checked state done programmatically

Get the value from a particular column

I'm trying to alert message on click each column. I have a table in which three row and four column, now I want alert message with next column value on third column click of each table. I have tried this but all column get value not a particular column. my problem is this is invoke in every column click but I want alert message only when third column click of each row.
HTML
<table id='myTable'>
<tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
</table>
JS
$("#myTable tr").bind("click", function () {
alert($(this).children("td").eq(3).html());
});
Demo Here

please try this code
$(document).ready(function () {
$('#myTable tr').each(function (Mindex, Mval) {
$(Mval).find('td:eq(2)').click(function () {
alert($(Mval).find('td:eq(3)').html());
});
});

Try this
$('table#myTable tr td:nth-child(3)').on('click', function() {
alert($(this).next().html());
});
Check Here

$("#myTable tr td:nth-child(3)").click(function () {
alert($(this).next().html());
});

Try this:
$('#myTable').children('tr').children('td').eq(3).on('click', function() {
alert($(this).next().html());
});
The above function makes sure that you are calling the direct children elements but not any nested other same elements. Solves future regressions.

If your table is going to stay the same size there are answers that already work. If your table is going to grow I would recommend doing some event delegation. It will dramatically speed up the page if there are going to be a large number of event listeners.
$('#myTable').on('click', 'td:nth-child(3)', function(){
alert($(this).text());
});
See this jsfiddle, and this jquery documentation.

below code will find and set the desired column value
$('#myTable tr:gt(0)').each(function(){
// console.log($('td:eq(3)', $(this)).html());
alert($('td:eq(3)', $(this)).html());
$('#myTable').find('tr:gt(0)').find('td:eq(3)').html("hello");
});

Try this:
var thirdEle = $("#myTable tr td:nth-child(3)");
thirdEle.bind("click", function () {
alert($(this).html());
});