Combining multiple columns

Taurus

Hi,

I have a Web service that returns 5 columns(First Name, Last Name, Address1, Address2, Phone) and I want to show that data in DataTable with 4 columns, like Column1: First Name, Column2: Last Name, Column3: Address1 + Address2, Column4: Phone.

I am using JSONP(server side), "bServerSide": true, "sAjaxSource", "aoColumns"

I do not want to change the SQL query, please let me know if there is a way to achieve this in DataTables.

Thanks.

fbas

http://datatables.net/ref#fnRender to combine column data

http://datatables.net/ref#bVisible to hide extraneous column

Taurus

fbas,

Thank you for your quick response. I will try combining column data based on the information you provided.

I was able to hide the columns but I have a question. when I looked at the page source the columns that were selected to hide were not available in DOM(no hidden TDs). My query actually returns around 15 fields / columns and I want to display only 5 columns in the DataTable but when user selects a row I need to show entire data(15 fields) in next page(or with the row is Expanded as in this page http://datatables.net/ref#fnRender). Could you please let me know how the hidden data can be accessed using JavaScript?

Thanks for all your help.

fbas

Yes. It's true that DT doesn't render columns that are hidden. But DT keeps it's own internal data, including data from hidden columns.

You can access the internal data in a few ways. you can check out API functions fnGetData (http://www.datatables.net/ref#fnGetData) but keep in mind that the row indexes are not the same as the index of a row in Javascript/Table, so you should use fnGetPosition to convert between the Table index and the internal DT data index. You could, if you wanted to, also get the aoData (or aoColumns) from the oSettings object by calling your the API function fnSettings().

If you use fnRender, the data is provided for you in the oObj that is passed to your render function
oObj tells you your row number (oObj.iDataRow), column (oObj.iDataRow), the oSettings object (oObj.oSettings) and an array of all the data in that row INCLUDING HIDDEN (oObj.aData).

I recommend using fnRender, with which you can render your visible column to include data from the columns you wish to have hidden. Here is an example: assuming the data you want is column 2 and 3 (address1 and address2) and column 3 will be hidden:

[code]
/* Using aoColumnDefs */
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ // merge address1 and 2 into this column
"fnRender": function ( oObj ) {
return oObj.aData[2] +'
'+ oObj.aData[3];
},
"aTargets": [ 2 ]
},
{ // hide address2 column
"bVisible": false,
"aTargets": [3]
{
]
} );
} );


[/code]

Taurus

fbas,

Thanks a lot for the information provided and for spending your valuable time in giving a detailed reply. I will try it and update you once it is done.

Thanks!