Making table responsive (hiding column automatically)

rahulpp

Hello,

I am working on datatable where very complex JSON dataset gets populated in to tables.. I am making the UI responsive hence I am hiding column according to the width.. Right now, I have used the solution which was given somewhere on the forums.

Here is the partial code

[code]

if (w >= 1500 && w < 1536)
{
datatableObj.fnSetColumnVis((columnCount - 1), false);

}
else if (w >= 1536 && w < 1600) {

datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 3;
}
else if (w >= 1244 && w < 1536) {
datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);
datatableObj.fnSetColumnVis((columnCount - 3), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount -1)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle };
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 4;
}
else if (w >= 1159 && w < 1244) {
datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);
datatableObj.fnSetColumnVis((columnCount - 3), false);
datatableObj.fnSetColumnVis((columnCount - 4), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle };
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 5;
}
else if (w >= 1000 && w < 1159) {
datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);
datatableObj.fnSetColumnVis((columnCount - 3), false);
datatableObj.fnSetColumnVis((columnCount - 4), false);
datatableObj.fnSetColumnVis((columnCount - 5), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 6;
}
else if (w>=910 && w < 1000) {
datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);
datatableObj.fnSetColumnVis((columnCount - 3), false);
datatableObj.fnSetColumnVis((columnCount - 4), false);
datatableObj.fnSetColumnVis((columnCount - 5), false);
datatableObj.fnSetColumnVis((columnCount - 6), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 6), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 6)].sTitle }
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 7;
}
else if (w>=800 && w < 910) {
datatableObj.fnSetColumnVis((columnCount - 1), false);
datatableObj.fnSetColumnVis((columnCount - 2), false);
datatableObj.fnSetColumnVis((columnCount - 3), false);
datatableObj.fnSetColumnVis((columnCount - 4), false);
datatableObj.fnSetColumnVis((columnCount - 5), false);
datatableObj.fnSetColumnVis((columnCount - 6), false);
datatableObj.fnSetColumnVis((columnCount - 7), false);

dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 6), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 6)].sTitle }
hiddenRightColumnArray.push(dataRow);
dataRow = { "Index": (columnCount - 7), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 7)].sTitle }
hiddenRightColumnArray.push(dataRow);

window.lastColumnVisible = columnCount - 8;
}
.
.
.
.

.
.
.


[/code]


The code quality is very poor. I need to perform this action within simple code itself. There can be more than 9-10 columns since data is being populated from dynamic JSON datasets..

Is there any workout that will automatically hide excessive columns with respect to width of datatable wrapper?

rahulpp

Or, if you can assist me on how to get width of particular column, I would be able to write my own GOOD function to make it responsive.


Hope to get some help from your side..

Regards,
Rahul

allan

There currently isn't a better way of doing this. Once 1.10 is out I'm going to look at writing a plug-in for DataTables to make this nice and simple, but there isn't one yet.

Allan

rahulpp

Is there any way to get width of current column? I need to check width of columns and perform the logic accordingly.

allan

Just the jQuery standard way: $('td').width()

Allan