Issues while loading datatables after ajax call
Issues while loading datatables after ajax call
vinoj
Posts: 1Questions: 0Answers: 0
Hello everyone,
I am new to jquery and datatables, after playing around with both I have stuck with a problem and still searching for a solution.
I am not sure whether the approach used by me is correct.
First I am loading table tags from my server through ajax and then through datatables I am getting my data from database.
Below I have mentioned my datatables code, I am also using datatables hidden data feature.
[code]
function GetDBDetails(){
var url = "/cgi-bin/server.py";
var oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": url,
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
null,
null,
null,
{ "sClass": "center", "bSortable": false }
],
"fnServerData": function ( url, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "GET",
"url": url,
"data": aoData,
"success": fnCallback,
"error":function(){
$("#example_processing").html("Oops!!");
}
} );
},
"aaSorting": [[1, 'asc']]
} );
$('#showdetails').live( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( $('#example').dataTable().fnIsOpen(nTr) ){
/* This row is already open - close it */
this.src = "../includes/img/details_open.png";
this.title = "Open";
$('#example').dataTable().fnClose( nTr );
}
else{
/* Open this row */
this.src = "../includes/img/details_close.png";
this.title = "Close";
$('#example').dataTable().fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
}
[/code]
Issue:
Now the problem what I am facing is at first everything works perfectly fine when GetDBDetails() is called.
if my ajax is called again to load the table, my data is retrieved by datatables through above function
everything works fine except if I try and open the hidden row. It calls the below function twice.
[code]
$('#showdetails').live( 'click', function () {
[/code]
And again if I repeat the above steps above function gets called thrice and it goes so on and on.
due to which I am not able to toggle my hidden data to show.
Can any one tell where I am going wrong.
Thanks!
Vinoj
I am new to jquery and datatables, after playing around with both I have stuck with a problem and still searching for a solution.
I am not sure whether the approach used by me is correct.
First I am loading table tags from my server through ajax and then through datatables I am getting my data from database.
Below I have mentioned my datatables code, I am also using datatables hidden data feature.
[code]
function GetDBDetails(){
var url = "/cgi-bin/server.py";
var oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": url,
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
null,
null,
null,
{ "sClass": "center", "bSortable": false }
],
"fnServerData": function ( url, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "GET",
"url": url,
"data": aoData,
"success": fnCallback,
"error":function(){
$("#example_processing").html("Oops!!");
}
} );
},
"aaSorting": [[1, 'asc']]
} );
$('#showdetails').live( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( $('#example').dataTable().fnIsOpen(nTr) ){
/* This row is already open - close it */
this.src = "../includes/img/details_open.png";
this.title = "Open";
$('#example').dataTable().fnClose( nTr );
}
else{
/* Open this row */
this.src = "../includes/img/details_close.png";
this.title = "Close";
$('#example').dataTable().fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
}
[/code]
Issue:
Now the problem what I am facing is at first everything works perfectly fine when GetDBDetails() is called.
if my ajax is called again to load the table, my data is retrieved by datatables through above function
everything works fine except if I try and open the hidden row. It calls the below function twice.
[code]
$('#showdetails').live( 'click', function () {
[/code]
And again if I repeat the above steps above function gets called thrice and it goes so on and on.
due to which I am not able to toggle my hidden data to show.
Can any one tell where I am going wrong.
Thanks!
Vinoj
This discussion has been closed.