Show/Hide details not working properly with pagination on page under Jquery Tabs

manishkhatri

Hi There,

I am facing a strange issue while implementing the datatable. I have a page with 5 Tabs. Tab content is coming through ajax.

I have implemented datatable on response generated by ajax and its working perfectly fine. Now i have to use Show/Hide row details on datatable. I have implement and it worked fine for me.. but then i faced a problem that, if the response is under 100 rows it comes on single page as i have set the "iDisplayLenght" to 100. But when cross the 100 rows length, and i tried to open the detail on next page, it not working.

Would really appreciate the help. Below is the code :

AJAX Response :
[code]



Point Type
Touch Date
Touch Time
Point ID
Point Description
Latitude
Longitude
Actual Reading
Status
Map
View Logs
Download Date
Download Time
Low Limit
Normal Reading
High Limit
Alarm
Temp Unit
Fuel Level




Location
2012-05-01
04:20:22
1501326006
Light Pole Unassigned
0.000000000
0.000000000

Secured
 
View Logs
2012-05-01
07:20:00








[/code]




JS Code :

[code]
// JavaScript Document

$(function(){
$( "#tabs" ).tabs({
//spinner: '',
disabled: [2, 3],
cookie: {
expires: 1 // store cookie for a day, without, it would be a session cookie
},
cache: false,
//selected: idxx,
ajaxOptions: { ajaxOptions: { cache : false },
error: function( xhr, status, index, anchor ) {
$(anchor.hash).html(
"Couldn't load this tab. Please try again ..." );
},
success: function(){


var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#all-activity-results-table thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#all-activity-results-table tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#all-activity-results-table').dataTable( {
"bSort": false,
"bJQueryUI": true,
"iDisplayLength": 100,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false ,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 12 ] },
{ "bVisible": false, "aTargets": [ 13 ] },
{ "bVisible": false, "aTargets": [ 14 ] },
{ "bVisible": false, "aTargets": [ 15 ] },
{ "bVisible": false, "aTargets": [ 16 ] },
{ "bVisible": false, "aTargets": [ 17 ] },
{ "bVisible": false, "aTargets": [ 18 ] },
{ "bVisible": false, "aTargets": [ 19 ] },
]
//"aaSorting": [[1, 'asc']]
});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#all-activity-results-table tbody td img').on('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../tp/images/details_open.png";
oTable.fnClose( nTr );
//alert("Close Clicked");
}
else
{
/* Open this row */
this.src = "../tp/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
//alert("Open Clicked");
}
});
}
}
});
});
[/code]