clickable row
clickable row
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!
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!
This discussion has been closed.
Replies
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
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...
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
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
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
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!
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
Regards,
Allan
$.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]
Regards,
Allan
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
[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]
[code]
"aoColumns": [{"sClass":"NoClickClass"},{"sClass":"ClickClass"}]
[/code]
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
Could you post your script for the clickable rows here?
Thanks in advance!
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]