clickable row

zadro

First, DataTables is awesome. The server side processing works great. I'm processing over 8000 rows and this is truly magic!

Now, on to my next hurdle. I need to be able to click a row and open up a jquery dialog. Problem is, I can't seem to get a simple alert to pop. I've tried all the examples in the forums using "fnDrawCallback" to no avail.

I simply want to click a row and pop an alert with the mysql primary key id.

Anyone have some examples? Much appreciated!

met00

see my code in the post "Image click not generating row data". I have everything here functioning except the overwrite of the old row in the datatable upon successful completion of the submit.

zadro

Thanks for responding. Where is your cellIndex() function defined? Can you display that code?

allan

Do you have the primary key in a table column? The easiest way of doing it is to put it into a hidden column (bVisisble - http://datatables.net/usage/columns#bVisible ) and then attach a click handler to the row using either fnDrawCallback, fnRowCallback or live event handlers!

I would suggest for server-side processing that live event handlers are more efficient and easier (in terms of memory use etc), athough fnRowCallback will over easier closure...

Using live event handlers you could do something like:

[code]
var oTable = $('#example').dataTable( ... );

$('#example tbody tr').click( function () {
var aData = oTable.fnGetData( this );
alert( aData[0] ); // assuming the id is in the first column
} );
[/code]
Hope this helps!

Regards,
Allan

zadro

Thanks for the quick response!!

I've been actually playing around with the concept you suggest but don't understand the bVisible option. Here's my code (I modified your server processing script to take _GET vars). I'm not sure if that's a security risk. But anyway, here it is:

[code]
var pTable = $('#partsTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sAjaxSource": "../i/php/ajax-table.php?pk=part_id&tbl=auto_part&flds=part_id~name~special~price"
});
$('table td').live('click',function(){
var aPos = pTable.fnGetPosition(this);
var aData = pTable.fnGetData(aPos[0]);
alert(aData);
});
{/code]

the "flds" var in the sAjaxSource are the columns. I would want to hide the first column.

Thanks again...

allan

Hi zadro,

Using HTTP GET variables is no less secure than POST - so no worries there :-)

The bVisible column will basically take one column and simply hide it. This can be useful for attaching data to a row which you want to access, but don't want to have it visible to the end users. Here is a client-side processing example: http://datatables.net/examples/basic_init/hidden_columns.html

What you need to do is define the array aoColumn, which _must_ have exactly the same number of columns as in the HTML and as in the JSON response you are sending. So for example, if you have 5 columns you might want to do:

[code]
var pTable = $('#partsTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sAjaxSource": "../i/php/ajax-table.php?pk=part_id&tbl=auto_part&flds=part_id~name~special~price",
"aoColumns": [
{ "bVisible": false },
null,
null,
null,
null
]
});

$('table td').live('click',function(){
var aPos = pTable.fnGetPosition(this);
var aData = pTable.fnGetData(aPos[0]);
alert(aData);
});
[/code]
Regards,
Allan

zadro

Awesome! Here's the final product to keep the initial sorting on the 1st visible column:

Javascript:

[code]
$(document).ready(function() {
var pTable = $('#partsTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sAjaxSource": "../i/php/ajax-table.php?pk=part_id&tbl=auto_part&flds=part_id~name~special~price",
"aoColumns": [{"bVisible":false},null,null,null],
"aaSorting": [[1,'asc']]
});
$('#partsTable tbody tr').live('click',function(){
var aData = pTable.fnGetData(this);
alert(aData[0]);
});
});
[/code]


HTML:

[code]



ID
Part Name
Special
Price




Loading data from server



[/code]

And the modified PHP script (ajax-table.php):

[code]
/* MySQL connection */
$gaSql['user'] = "*********";
$gaSql['password'] = "************";
$gaSql['db'] = "**************";
$gaSql['server'] = "localhost";
$gaSql['type'] = "mysql";
$gaSql['pk'] = $_GET['pk']; //primary key
$gaSql['tbl'] = $_GET['tbl']; //table name
$gaSql['flds'] = explode('~',$_GET['flds']); //fields, delimited by ~

$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );

mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );

/* Paging */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}

/* Ordering */
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i

allan

Hi zadro,

Thanks for posting your code - I'm sure others will find it useful as well! Good to hear it works well for you :-)

Regards,
Allan

zadro

Well, not out of the woods yet...
I did get the .dialog to work well. However:

I'm really having a hard time intermixing 2 different datatables. When I update or use fnDraw() then return to wither of my two tables, I get (when clicking on a row):

[code]oSettings.aoData[iRow] is undefined[/code]

Do I need to use another function along with fnDraw? Maybe unbind the click event?
Both tables redraw just find, but I'm not sure where the above error is coming from.

Thanks a million!

zadro

Allan,

Seems the issue happens after I call .load('my-script.php').dialog to process the modal window.
Is the XMR on .load causing the issue? Funny thing is that all the paging, sorting, searching still works on both tables.

This the last hurdle!!

Thank you

allan

Could you perhaps post the code which is causing this problem? I would guess it's something to do with the event handlers - but I can't be sure...

Regards,
Allan

zadro

[code]
$.ajaxSetup({cache:false});
var vTable = $('#vendorsTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sAjaxSource": "../i/php/ajax-table.php?pk=vendor_id&tbl=client_vendor&flds=vendor_id~fname~lname~city~state~phone~email~access_level~url",
"aoColumns": [{"bVisible":false},null,null,null,null,null,null,null,null],
"aaSorting": [[1,'asc']]
});
$('#vendorsTable tbody tr').live('click',function(){
var vData = vTable.fnGetData(this);
$('#dialog-form').load('vendors-edit.php?vendorid='+vData[0]).dialog({
title: 'Update Vendor',
height: 540,
width: 530,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
Delete: function() {
vendoridVal = $("#vendorid").val();
$.post("../i/php/vendors-exe.php",
{doaction:"del",vendorid:vendoridVal},
function(data){
vTable.fnDraw();
$('#dialog-form').dialog('close');
}
);
}
}
});
});
[/code]

allan

I don't support you have a working example you can show me ( http://datatables.net/contact if you don't want to make it public)? I can't see anything obvious in the above code I'm afraid - seeing it in action would probably help :-)

Regards,
Allan

shahid

(sorry for posting it in a wrong thread before)
Hi,

I have successfully implemented clickable rows. The problem is I have a column of checkboxes on which I don't want the click event will occur. The checkboxes column is to select particular rows not for opening the clickable row. How can I prevent that?

Shahid

zadro

You will have to set your "click" based on the cell instead of the row, assuming 2 columns, where the 2nd is clickable:

[code]
$(document).ready(function() {
var aTable = $('#yourtableid').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "somefile.php",
"aoColumns": [{"sClass":"NoClickClass",{"sClass":"ClickClass"}]
});
$('#yourtableid tbody td.Click').live('click',function(){
var aPos = aTable.fnGetPosition(this);
var aData = aTable.fnGetData(aPos[0]);
alert(aData);
});
});
[/code]

zadro

oops, forgot a curly brace on this line:

[code]
"aoColumns": [{"sClass":"NoClickClass"},{"sClass":"ClickClass"}]
[/code]

shahid

Hi zadro,

Thanks a lot for the answer. Just to note, there is one more typo in the code in line 8, it should be:
[code]
$('#yourtableid tbody td.ClickClass').live('click',function(){
[/code]

Shahid

maarten

Hi Shahid,

Could you post your script for the clickable rows here?

Thanks in advance!

shahid

Hi Maarten,

This is my script:
[code]

var oTable;
$(document).ready(function(){
oTable = $('#comment_table').dataTable({
"aoColumns": [
{"bSortable": false, "sClass":"NoClickClass"},
{ "bVisible": false, "sClass":"NoClickClass" },
{"sClass":"ClickClass"},
{"sClass":"ClickClass"},
{"sClass":"ClickClass"},
{"sClass":"ClickClass"}
],
"sAjaxSource":'${createLink(controller:'admin',action:'commentListJSON')}'
});

$('#comment_table tbody td.ClickClass').live('click',function(){
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
window.location = "showCommentForModeration/"+aData[1];
});

$('#check_all').click( function() {
$('input', oTable.fnGetNodes()).attr('checked', this.checked);
});
});

[/code]

maarten

Got it working, thanks alot!