How to get data of a selected row

natanrn

Hi everyone,

i'm new on datatable and have some questions.

Here is my code:
[code]
$(function() {
oCache.iCacheLower = -1;
$(".edit_pessoa").button("option", "icons", {primary:"ui-icon-pencil"});
$(".detail_pessoa").button("option", "icons", {primary:"ui-icon-search"});
var aTabela;
aTabela = $('#json_pessoa').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sEcho": 1,
"sAjaxSource": "<?= site_url("pessoa/json_index") ?>",
"aoColumns": [
{"sName":"id", "sClass":"pessoa_id"},{"sName":"Nome", "sType":"natural"},{"sName":"telefone"},{"sName":"documento", "sType":"natural"}
],
"fnServerData": fnDataTablesPipeline,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Mostrando _MENU_ linhas por página",
"sZeroRecords": "Nada encontrado com os parâmetros escolhidos - tente novamente",
"sInfo": "Mostrando _START_ a _END_ de um total de _TOTAL_ linhas",
"sInfoEmpty": "Mostrando 0 a 0 de 0 linhas",
"sInfoFiltered": "(filtrado de um total _MAX_ linhas)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primeiro",
"sPrevious": "Anterior",
"sNext": "Seguinte",
"sLast": "Último"
}
},
"bRetrieve":true,
"aaSorting":[[1,"asc"]]
});
$(".delete_pessoa").click(function(){
if($(".ui-selected").length){
$("#dialog").text("Tem certeza que deseja desativar o item "+$(".ui-selected .pessoa_id").text()+" ?")
.dialog("option", {buttons:{
SIM:function(){
var a_url = "<?= site_url("pessoa/delete") ?>/"+$(".ui-selected .pessoa_id").text();
$.ajax({
url: a_url,
dataType:"text",
success:function(resposta_url){
ajaxCallMsg(resposta_url, "A pessoa selecionada foi desativada");
}
})
$("#dialog").dialog("close");
},
NÃO:function(){
$("#dialog").dialog("close");
}}}).dialog("open")
}else{
tempMsg("Você precisa selecionar um item");
}
}).button("option", "icons", {primary:"ui-icon-trash"});
$(".detail_pessoa,.edit_pessoa").click(function(){
var get_url = this.rel;
if($(".ui-selected").length){
ajaxCallMsg(get_url+"/"+$(".ui-selected .pessoa_id").text());
}else{
tempMsg("Você precisa selecionar um item").dialog("open");
}
});
$("#json_pessoa tbody").selectable({tolerance:"fit",filter:"tr"})
}); [/code]

I'm trying to get data of a selectable row, but could not...i've tried multiples ways, but no sucess.

I've tried:

[code]
$("#json_pessoa tbody").click(function(event) {
$(aTabela.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
GetSelectedRowData(event.target);
});
function GetSelectedRowData(Obj) {
alert(Obj.innerHTML)
}
[/code]

and i've tried to add this, but no sucess:

[code]
"oTableTools": {
"sRowSelect": "single",

"fnRowSelected": function ( node ) {
alert("Clicked");
}
[/code]

Sorry about my english...

i need to get data from a selected row and create a dynamic ALT(div with display:none, show when a row is selected with a fadein event) to show some information about the selected item.

Thank u!

natanrn

i've put 2 examples, but i tried some many ways.

rowel

[quote]$("#json_pessoa tbody").click(function(event) { [/quote]

I don't think you can do this. (I tried, didn't 100% work for me.) The click event will only get attached to rows that are currently visible on page 1. If you go to another page, or change sort, the "new" rows on your webpage won't have the click event attached to it.

Check out fnCreatedRow callback, and attach your click even inside that callback. Worked for me.

allan

In fnRowSelected simply use the fnGetData API method to get the data for the row: `aTabela.fnGetData( node[0] );` (noting that the parameter passed into fnRowSelected is an array in the latest version of TableTools).

Allan

natanrn

Rowel, i try to use that, but no sucess.

[code]"fnCreatedRow" : function( nRow, aData, iDataIndex) {
$(nRow).click(function(){alert(aData[0])});
}[/code]

Allan, i've tried to use that too, but nothing...

[code]"oTableTools": {
"sRowSelect": "single",

"fnRowSelected": function ( node ) {
aTabela.fnGetData( node[0] );
}[/code]

Where I am going wrong?

allan

In which case, please link to a test page showing the problem.

Allan

natanrn

Allan, i gonna do that soon as possible...

Some more information:

[quote]My table is dynamic, and the data was catched and mounted with server side.[/quote]

What i want to do:

[quote]I want to put a "self-made div-alt" on my "tr" when clicked, which will show my div with some items like inputs and data recovery from de row. And this div must appear on the mouse position.[/quote]

Guys, i'm really glad for your help.

natanrn

Allan, hello again...

I discovered which going wrong, it's the class "selectable":

[code]$("#json_pessoa tbody").selectable({tolerance:"fit",filter:"tr"})[/code]

This class don't let click an item below, my code is right, but i can't click on my tr with selectable class...

Know you an alternative way to select an item without selectable class or a way to use that class without that problem?

Thank you again and sorry about my low knowledge.

allan

No really I'm afraid - I'm not sure what the `selectable` jQuery plug-n is doing there, but it sounds like it might be preventing event propagation. You'd be best asking the author of that plug-in or debuting that code I think.

Allan