Show / Hide Row Details on ServerSide

rjbelandres

Hi, I have a page that calls on server processing (*.php) and callback to datatables, when i tried to implement Show/Hide Row Details like in the examples my table body tr does not insert new column for the details image column, but on the table head tr it works. I wonder if the sample only works on static datas not on server processing??? Here's my code for analysis.

[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[11]+' '+aData[12]+'';
sOut += '';
return sOut;
}
( "#srchbtn" ).button
({ icons: { primary: "ui-icon-gear" }
}).click(function(){
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function ({
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 2, "asc" ]],
bProcessing: true,
bServerSide: true,
bDestroy: true,
bJQueryUI: true,
bAutoWidth: false,
sPaginationType: 'full_numbers',
sAjaxSource: 'serverside/final_members.php',
bDeferRender:true,
fnServerData: function (sSource,aoData,fnCallback ) {
aoData.push( { "name": "pPin", "value": document.mempininq.pin.value } );
aoData.push( { "name": "plName", "value": document.mempininq.lname.value } );
aoData.push( { "name": "pfName", "value": document.mempininq.fname.value}); $.ajax( {
"dataType": 'json',
"type": 'GET',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}

});
$('#example 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 = "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]

Thanks in advance and more power.

allan

There are two ways you can do this:

1. Easiest is to modify the server-side processing script to put in the open/close image in the first column (i.e. inject the first column)

2. The more flexible approach is to use mDataProp (read more about it here: http://datatables.net/blog/Extended_data_source_options_with_DataTables ) to select what you want from the server for each column, and set sDefaultContent for your first column (with mDataProp being null to the default content is used).

Allan

jinjung

Hi,
Sorry,I had not seen this topic, strange because I spent a lot of time for searching.
So,an other solution http://datatables.net/forums/discussion/8694/ with client side.
Jinjung

jinjung

Hello, I'm just testing all those solutions with extra "ColReorderWithResize" 1.0.3 with DT 1.8.2 and Nightly (not tested with 1.9.0)

In my mind, Allan's solution is the best choice (mDataProp being null to the default...).
Tests are always with server side method.
I want details column on the first position, then :
[code]
"aoColumnDefs": [
{
"sTitle": "+",
"mDataProp": null,
"bSortable" : false,
"bSearchable": false,
"sClass": "center",
"sDefaultContent": '',
"aTargets": [ 0 ],
"sWidth": 20
},
{ "sTitle": "Name", "mDataProp": "name", "aTargets": [ 1 ]},
{ "sTitle": "Type", "mDataProp": "type", "aTargets": [ 2 ], "sWidth": '33%' },
//...
[/code]

This previous code is perfect with DT 1.8.2, searchable, movable column, all is perfect..
With DT Nightly, there is one problem :

"iSortCol_0" keep the old number place of column, after movable a column, so result is wrong.

Question :
Is ColReorderWithResize compatible with Nighly version ?
Or my code would be wrong ?

I can't to a show you a working web site because not on www but I can explain differently with data posted if you want.
Also, I 'm sorry but I'm not great JS programmer, so I can't debug ColReorderWithResize !

Jinjung

allan

Does it work with DataTables 1.9.0?

ColReorderWithResize is a 3rd party plug-in so it isn't fully supported by me - perhaps someone else can offer suggestions? Are you getting a Javascript error perhaps? Are you using the latest version of the plug-in?

As far as I can tell, ColReorder itself is fully compatible and working with 1.9.1.dev and server-side processing: http://datatables.net/release-datatables/extras/ColReorder/server_side.html .

Allan

jinjung

OK, I have just corrected ColReorderWithResize.js (last version 1.0.3)
Movable, ordering, and sorting works with this patch and Nighltly.
[code]
/* Data column sorting (the column which the sort for a given column should take place on) */
// before :
oSettings.aoColumns[i].iDataSort = aiInvertMapping[ oSettings.aoColumns[i].iDataSort ];
// after :
oCol = oSettings.aoColumns[i];
for ( j=0, jLen=oCol.aDataSort.length ; j

jinjung

Allan, I seen, that "Cbattarel" sent you a new code about this thirdparty plugin based on v1.0.5 of ColReorder.
http://www.datatables.net/forums/discussion/2474
Have you a link for that ?
Jinjung

allan

Hi Jinjung,

I was just about to update the code on the server when I noticed a bug when using non-scrolling tables (i.e. the one used in the demo on this site), so I don't think its ready for release yet. However, if you want the code (perhaps you can take a look and fix the issue!?) it is available here: http://datatables.net/extras/thirdparty/ColReorderWithResize/ColReorderWithResize-1.0.5.js

> Allan, it is possible to add resize option in your code ?

No. Column resizing, when available as a supported plug-in for DataTables will not be integrated with ColReorder (obviously it will work in tandem it, but it will not be part of the same code base) or any other plug-in. I also think that the supported plug-in will be implemented slightly differently to make the column width handling more like Excel and other spreadsheet programs.

Allan