Datatables show/hide detailjs example with SQL
Datatables show/hide detailjs example with SQL
Hello!
I think datatables is awesome and im doing some development just for fun, hopefully ill get better at it at then be able to support the community. Im using latest versions of everything and code igniter.
Im trying this example:
http://datatables.net/examples/api/row_details.html
But im having some problems.
I'll show you my code for starters:
[code]function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = 'index.php/tryhardcontroller/datatable',
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
'fnServerData': function(sSource, aoData, fnCallback)
{
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
$('#big_table tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "<?php echo base_url(); ?>assets/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "<?php echo base_url(); ?>assets/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} ); [/code]
Html is just:
[code]
ID
First name
Last name
e-mail
phone
[/code]
Controller:
[code]<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class TryhardController extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('Datatables');
$this->load->database();
}
public function index()
{
$this->load->view('tryhard_view');
}
public function datatable()
{
$this->datatables->select('id,firstname,lastname,email,phone')
->from('people');
echo $this->datatables->generate();
}
}[/code]
With this code the data from database shows up in wrong columns, image doesnt show in column 0.
I tried using aocolumns and mData and the id,firstname,lastname,email,phone is there in the ajax source but nothing like "img" ..
I also tried putting and extra row to to SQL-query result using addRow with some html for the picture to show at column 0 without success.
How would you go on to debug this code? What tools?
Is there a way for me to look at ("sAjaxSource": '<?php echo base_url(); ?>index.php/tryhardcontroller/datatable',)
the resulting data that populates the datatable?
Thank you! If theres anything you need to know or if any1 want to see more code just ask me here or in PM.
Im happy to show you the whole project if you are beginner just like me..
Regards
I think datatables is awesome and im doing some development just for fun, hopefully ill get better at it at then be able to support the community. Im using latest versions of everything and code igniter.
Im trying this example:
http://datatables.net/examples/api/row_details.html
But im having some problems.
I'll show you my code for starters:
[code]function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = 'index.php/tryhardcontroller/datatable',
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
'fnServerData': function(sSource, aoData, fnCallback)
{
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
$('#big_table tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "<?php echo base_url(); ?>assets/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "<?php echo base_url(); ?>assets/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} ); [/code]
Html is just:
[code]
ID
First name
Last name
phone
[/code]
Controller:
[code]<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class TryhardController extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('Datatables');
$this->load->database();
}
public function index()
{
$this->load->view('tryhard_view');
}
public function datatable()
{
$this->datatables->select('id,firstname,lastname,email,phone')
->from('people');
echo $this->datatables->generate();
}
}[/code]
With this code the data from database shows up in wrong columns, image doesnt show in column 0.
I tried using aocolumns and mData and the id,firstname,lastname,email,phone is there in the ajax source but nothing like "img" ..
I also tried putting and extra row to to SQL-query result using addRow with some html for the picture to show at column 0 without success.
How would you go on to debug this code? What tools?
Is there a way for me to look at ("sAjaxSource": '<?php echo base_url(); ?>index.php/tryhardcontroller/datatable',)
the resulting data that populates the datatable?
Thank you! If theres anything you need to know or if any1 want to see more code just ask me here or in PM.
Im happy to show you the whole project if you are beginner just like me..
Regards
This discussion has been closed.
Replies
DataTables warning (table id = 'big_table'): Requested unknown parameter '5' from the data source for row 0
Which means I want to check how the ajax looks like. Really cant find anything on web about it :-(