[SOLVED]Feature not working with server side processing

Denonth

Hi all,

As I was posting my question on this forum and didn't get any answer.

I was debugging a bit and I think that hiding a row example is not working when I am using a server side processing.

[code]
/* Formating function for row details */
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() {

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#jphit thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
/**** Possible problem****/
$('#jphit tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*************************/
var oTable=$('#jphit').dataTable( {
"sDom": 'T,C<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf"
},
"oColVis": {
"buttonText": "Extend table",
"activate": "mouseover"
},
"aoColumnDefs": [
{ //"bVisible": false, "aTargets": [ 0 ],
"bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1,'asc']],
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sScrollY": "350px",
"bDeferRender": true,
"sAjaxSource": "increment_table.php"
} );



/* 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
*/
$('#jphit tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );

} );
[/code]

Problem is occurring when the td needs to be inserted in the tbody.
My header is show correctly and I have one empty spot in the first cell on the left.
But when data is coming from ajax call then everything is mixed. For example I should get a empty spot on the first cell on the leeft side and I am getting a empty cell on my right side.

I will give you a link to my previously posted question here on this forum but with no luck I must say.


My question is how to use this function if I am using a server side processing?

LINK: http://datatables.net/forums/discussion/11227/please-help-hidden-row-example-is-not-drawing-rows#Item_5

Denonth

I have tried to use this code with data that I wrote manually inside the table and it is working perfectly.

I have tired to put the code inside the fnDrawCallback funtion but then I have 2 headers as my table is drawing twice.

How to use this with sAjaxSource???

cserfoss

Hi --

I'm still pretty new to this but I figured that any answer is better than none and hopefully my working code will help you determine where your issue is.

In my scenario, if you add 'control' to the sClass param for a given ColumnDef, it allows the hidden row to be toggled on/off on an individual cell basis.

I also noticed that you had sAjaxSource in your aoColumnDefs where I did not.

Good luck!


[code]
$(document).ready(function() {
var anOpen =[];
var sImageUrl = "/inc/DataTables-1.9.1/examples/examples_support/";

var oTable = $('#clientJobs').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "pclientjobs.php",
"bFilter": false,
"bAutoWidth": false,
"sScrollY": "400px",
"aaSorting": [[1,"asc"]],
"sDom": 'frtS<"ui-state-default ui-toolbar ui-helper-clearfix"i>',
"bDeferRender": true,
"oLanguage": {
"sEmptyTable": "No records found", // Message when no records are found
"sInfo": 'Showing _START_ to _END_ of _TOTAL_ entries',
},
"aoColumnDefs": [ // Total Width of Table: 750px
{ "aTargets": [ "COL_JOBID" ],
"mDataProp": null,
"sClass": "center control",
"bVisible": true,
"bSortable": false,
"sDefaultContent": '',
"sWidth": "30px"
},
{ "aTargets": [ "COL_TITLE" ],
"mDataProp": "Title",
"sClass": "control",
"sWidth": "250px",
}

[ Additional Columns removed for brevity ]

]
});

$('#clientJobs td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatClientJobDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
} else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
});
}
});
});

function fnFormatClientJobDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );

var sOut = ''+
''+
'Job ID:'+oData.Job_id+''+
'City:'+oData.City+''+
'Part Time / Full Time:'+oData.pt_ft+''+
'Short Term / Long Term:'+oData.Short_long_term+''+
'Wage:'+oData.Wage+''+
'Description:'+oData.Description+'';


var sOut = sOut + ''+'';

return sOut;
}
[/code]

The CSS code for the innerDetails div is as follows (although it does get run through the less css extender):

[code]
div.innerDetails {
display: none;
line-height: 1.3em;
padding: 5px 15px 5px 15px;
table { width: 700px; }
td,th { vertical-align: top; font-size: @normal; }
} /* hides the details by default */
[/code]

Denonth

First of all thank you for your comment. You are the FIRST one here to answer on this question.

Actually here is the problem. I am having an error when I manually insert a new column into my table.
Cell in the table is normally inserted but in the table body there is an error while adding an empty cell to the rest of the columns.

Your code is good but as I can see you are inserting into a existing table?

I have problem with:
[code]
$('#jphit tbody tr').each( function () {
this.insertBefore( nCloneTd, this.childNodes[0] );
} );
[/code]

Check the links that I have provided in the same question that I have posted earlier. You can see the link on the stackoverflow and see the actual pic.

Thank you

allan

Have you looked at this example of how show/hide can work with server-side processing: http://datatables.net/release-datatables/examples/server_side/row_details.html ?

Basically the "trick" is that you need an extra empty cell in the first column - there are a few ways this can be done:

1. With mData and sDefaultContent
2. Return an empty string or an img src from the server (this is the approach my example takes)

If this doesn't help, please link us to a test page showing the problem so we can help.

Allan

Denonth

Can you give me example of how to insert value into the first column as you inserted from php.
I need to insert image link in the first column. As I really can't change mysql table neither the php.

I have been looking into mData example and it is a bit complex. I will send you a example what I have so far and you can insert mData example inside:

[code]

/* Formating function for row details */
var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
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() {
oTable = $('#jphit').dataTable( {
"sDom": 'T,C<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf"
},
"oColVis": {
"buttonText": "Extend table",
"activate": "mouseover"
},
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
null,
null,
null,
null,
null,
null

],
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sScrollY": "350px",
"bDeferRender": true,
"sAjaxSource": "live_table.php"

} );


/* 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
*/
$('#example tbody td img').live( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );

});
[/code]

Thank you.

allan

If you can't change the PHP, then mData and sDefaultContent are the way to do it. mData is just a reference to the data element in the data source array for the column. By default it in an integer counting from 0, but you can easily change it as described in the blog post.

Allan

Denonth

I have tried to put something like

[code]
"aoColumns": [
{ "sClass": "center", "mData":null, "bSortable": false },
null,
null,
null,
null,
null,
null,
null,
null,
null

],
[/code]

And nothing is drawing me another column.
How to define aoColumns then?

EDIT:
I have tried this and it is not working:

[code]
"aoColumnsDefs": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '',
"aTargets": [0]
}

],
[/code]

Here is my debug analysis:

http://debug.datatables.net/imowiy

Please help

allan

I'd expect to see something like this:

[code]
aoColumns: [
{
mData: null,
sDefaultContent: ""
},
{ mData: 0 },
{ mData: 1 },
{ mData: 2 },
{ mData: 3 },
{ mData: 4 },
// ...
]
[/code]

i.e use mData to shift the columns by 1.

Allan

Denonth

Okay so I have put:
[code]
"aoColumns": [
{
"mData": null,
"sDefaultContent": ''
},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
{ "mData": 3 },
{ "mData": 4 },
{ "mData": 5 },
{ "mData": 6 },
{ "mData": 7 },
{ "mData": 8 },
{ "mData": 9 }

],
[/code]

Why do I need to shift it does put all the columns in the right place? I mean there is 10 columns right? But I still can't see the right picture.

So I need to do shifting after this or before? Btw is there any function to shift or I need to do some loop and move each mdata to the right for one?

Is there any example of how to do this?

allan

Your server is returning an array of items right? You want the item that is in index 0 to be in column 1. The item in index 1 to be in column 2 etc. Hence the need for the shift. That allows your first column to be free for the show/hide image.

Allan

Denonth

Yes I understand but is there any example of how to shift with mData please.

allan

You just showed me one! :-)

However, no I don't currently have one, but I can put one together if you require it. I don't have a huge amount of free time for putting examples together I'm afraid, but priority support will always get priority: http://www.datatables.net/support

Allan

Denonth

You mean that example what I wrote above :)
Yea but thing is that this is not working :(

Here is my debug code :

http://debug.datatables.net/ayoyaj

Problem is that I am on this error for a few days and I need to to move on :) I know that you have a lot of work to do. And I really appreciate every help I get.

allan

> DataTables 1.9.2

That isn't going to help if you are using mData :-). mData was introduced in 1.9.3: http://datatables.net/forums/discussion/11251/datatables-1.9.3 .

I'd suggest updating, or using mDataProp (which is the old name, and will still work with 1.9.3).

Allan

Denonth

OMG that's it?? :)
Thank you so much. I really didn't realized that it was version problem.

jormerod

Hi,

I've followed this thread and also got this working however I've noticed that the columns are not smart sized? They appear to all be of the same/similar size thus forcing longer strings into the next line. Is this somthing todo with mData as when I revert back to a simple example without mData it works fine?

[code]

/* Formating function for row details */
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;
}



$(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('.tbl_details_recurringInvoiceLines thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('.tbl_details_recurringInvoiceLines tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );


/*
* Initialse DataTables, with no sorting on the 'details' column
* */
var oTable = $('.tbl_details_recurringInvoiceLines').dataTable( {

"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [ 0 ]
}
],
"aaSorting": [[1, 'asc']],
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:"
},
"sDom": '<"table_top"fl<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>',
"bServerSide": true,
"sAjaxSource": "data/table-data.inc.php",
"aoColumns": [
{
"mData": null,
"sDefaultContent": ''
},
{"mData": 0},
{"mData": 1},
{"mData": 2},
{"mData": 3},
{"mData": 4},
{"mData": 5},
{"mData": 6},
{"mData": 7},
{"mData": 8},
{"mData": 9},
{"mData": 10},

]
});


/* 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
*/
$('.tbl_details_recurringInvoiceLines tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );



[/code]

allan

Hi jormerod,

The smart sizing isn't particularly effective with server-side processing. This is because the smart sizing tries to construct a 'worst case' table from the data available, but of course with a server-side processing table, the full data set is not available at the client-side, so it isn't possible to construct the worst case table and use that for sizing the columns. The best that can be done is to use the information that is available in the table which is usually just the header.

How many rows are you working with? Might client-side processing with deferred rendering be an option? That should cope with 20'000 rows (perhaps a bit less if you need IE6 to run well, and a bit more if you can just count on the latest browsers being used).

Regards,
Allan