Adding double-click on row for server-side to allow me to serve an editor

gutzofter

[code]
var oTable;

$(document).ready(function() {
/* Init the table */
oTable = $("#sku_tbl").dataTable({
bProcessing: true,
bServerSide: true,
sDom: '<"top"i>rt<"bottom"flp<"clear">',
sAjaxSource: "includes/SkuTable.php"
});

/* Click event handler */
$('#sku_tbl tbody tr').live('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];

postSelectedRow(iId);
});

function postSelectedRow(sku_id) {
$.get("includes/SkuEdit.php", {
sku_id: sku_id },
function(msg){ $("#sku_container").html( msg );
});
}
});
[/code]

My data for the table is from server-side processing.
When a user double-clicks on a row it will return the first columns data in that row. See:
[code]
var iId = aData[0];
[/code]
My first column is my UID for the MySql table.
[code]
#sku_tbl
[/code]
Is the name of my table in my HTML.

gutzofter

OOPS! on my part. using live killed me. Every time I reloaded the data table it included an additional postSelectedRow event. Changed the live to bind. Fixed Now:
[code]
var oTable;

$(document).ready(function() {

/* Init the table */
oTable = $("#sku_tbl").dataTable({
bProcessing: true,
bServerSide: true,
sDom: '<"top"i>rt<"bottom"flp<"clear">',
sAjaxSource: "includes/SkuTable.php",
fnDrawCallback: function() {
clickRowHandler();
}

});

/* Click event handler */
function clickRowHandler() {
$('#sku_tbl tbody tr').bind('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];

postSelectedRow(iId);
});
}

function postSelectedRow(sku_id) {
$.get("includes/SkuEdit.php", {
sku_id: sku_id
},
function(msg){
$("#sku_container").html( msg );
});

}
});
[/code]

andrewmoreno

gutzofter,

Thanks so much for this example. I was able to use it to link to a "Detail Page" for the selected row. It is working great, thanks again. I am also sending additional filtering parameters from 3 dropdown boxes and drawing the table when any of the values in the dropdown change. Sample code below.

[code]
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aoColumns": [
{ "sWidth": "24%" },
{ "sWidth": "20%" },
{ "sWidth": "23%" },
{ "sWidth": "19%" },
{ "sWidth": "7%" },
{ "sWidth": "7%" },
{ "bVisible": 0 }
],
"bSort": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajax.do",
"fnDrawCallback": function() {
clickRowHandler();
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
var clientVal = $("#clientVal").val();
var aeVal = $("#aeVal").val();
var stateVal = $("#stateVal").val();

if (clientVal == "0")
clientVal = "";
/* Send values from dropdown boxes to server with Ajax call */
aoData.push( { "name": "sClientSeq", "value": clientVal } );
aoData.push( { "name": "sAccountExecutive", "value": aeVal } );
aoData.push( { "name": "sState", "value": stateVal } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
}
});

new FixedHeader( oTable );

oTable.fnSetFilteringDelay(500);

oSettings = oTable.fnSettings();

/* Click event handler */
function clickRowHandler() {
/* Highlight selected row on single click */
$('#example tbody tr').click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).toggleClass('row_selected');
});

/* Link to detail page of selected row on double click */
$('#example tbody tr').bind('dblclick', function () {
var aData = oTable.fnGetData( this );
var iId = aData[6];

detailSelectedRow(iId);
});
}

function detailSelectedRow(propId) {
location.href='detail.do?id=' + propId;
}

$('#clientVal').change(function() {
oTable.fnDraw();
});

$('#aeVal').change(function() {
oTable.fnDraw();
});

$('#stateVal').change(function() {
oTable.fnDraw();
});

} );
[/code]

thePepper

Gutzofter, thanks for the code above it helped me out handling the one click event in a way that I can make use of the built in “Select all” and “Deselect all”.
Here is what I initially used, and I was able to retrieve the array of ids of the selected rows:

$(document).ready(function() {

$('#user_inbox_form').submit( function() {
//var sData = $('input', oTable.fnGetNodes()).serialize();
if ((rowSelected != "") || (rowSelected != 0)){
alert( "The following data is submitted to the server: \n\n" + rowSelected );
return true;
}
else{
$("#feedback").text("Please select one or more documents first!").show().fadeOut(2000);
return false;
}
} );
// Set table variables defaults
var oTable = $('#user_inbox_table').dataTable( {
etc.
.
.
} );

//Click event handler
$('#user_inbox_table tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, rowSelected) == -1 ){
rowSelected[rowSelected.length++] = iId;
}
else{
rowSelected = jQuery.grep(rowSelected, function(value) {
return value != iId;
} );
}
$(this).toggleClass('row_selected');
} );
} );

} ); /* document ready function */

So with your script, the click and double click handles work fine but:
- I can never deselect the last clicked row (even if I use the "Deselect all" built in button)
- How can I retrieve the IDs of the current selected rows? Is it held in an array or nodes that can be serialized?

Thank you!