Option to display only certain columns?

wastedspace

Hi,

I would like to have the option of only displaying the first x amount of columns in a table which is dynamically built with json. Is this possible? Reason being is that when the table is first loaded, I just want to display a subset of the data as a kind of summary. I don't have the option currently of tweaking the server-side code unfortunately. It is currently returning about 15 columns of data. I thought something like the code below would work to display only the first 4 columns, but it doesn't:

[code]$.getJSON("url/path/here.php", null, function (json) {
var columns = [];
$.each(json.headers, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
$("#example").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": json.rows,
"aoColumns": columns,
"aoColumnDefs": [
{ "bVisible": true, "aTargets": [ 0,1,2,3 ] }
]
});
}); [/code]

Also, as you can see I'm building the column titles dynamically. I am potentially going to be dealing with thousands of rows, so was hoping to use the server-side processing feature. But is this possible with dynamic headers?

I'm fairly new to DataTables, so please be gentle ;)

Many thanks!

Omnimike

I'm under the impression that bVisible is true by default, so you probably want to set the ones you don't want to see to bVisible: false (instead of setting the ones you do want to see to true).

colvis is an extra which lets users change the columns they can see, which might be exactly what you are looking for.
http://datatables.net/extras/colvis/

allan

As Omnimike says bVisible is true by default - so want you want to do is have all columns hidden and then set the columns you want back to visible, which you can do like this:

[code]
$.getJSON("url/path/here.php", null, function (json) {
var columns = [];
$.each(json.headers, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
$("#example").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": json.rows,
"aoColumns": columns,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ '_all' ] },
{ "bVisible": true, "aTargets": [ 0,1,2,3 ] }
]
});
});
[/code]

"_all" is a magic string for "aTargets" which will target all columns, and then the second entry overrides that. "_all" is currently the only magic string for aTargets, although other options in future might be "_odd", "_even" etc...

Regards,
Allan

wastedspace

Thanks guys,

colvis isn't really an option here, as I don't want to give the user the control in this particular instance.

Allan - I did try your example, but it didn't seem to work. I just get a blank space where the table should be... strangely though, I see no errors in the Firebug console...

This did work however (although perhaps not the most elegant):

[code]$.getJSON("url/path/here.php", null, function (json) {
var columns = [];
$.each(json.headers, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
var oTable = $("#example").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": json.rows,
"aoColumns": columns,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ '_all' ] }
]
});
var i=0;
for (i=0;i<=3;i++){
oTable.fnSetColumnVis(i, true );
}
}); [/code]

allan

Oops - sorry - I forgot that DataTables does the application of the parameters in a top to bottom order! The two elements in the aoColumnDefs array can just be swapped and it will work:

[code]
$.getJSON("url/path/here.php", null, function (json) {
var columns = [];
$.each(json.headers, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
$("#example").dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": json.rows,
"aoColumns": columns,
"aoColumnDefs": [
{ "bVisible": true, "aTargets": [ 0,1,2,3 ] },
{ "bVisible": false, "aTargets": [ '_all' ] }
]
});
});
[/code]

Allan

fbas

@allan: I wasn't aware of the "_all" pseudo index ('magic strings'). this is good to know.

can you put this into the documentation at http://www.datatables.net/ref#aTargets ?

I saw that you were planning on allowing named indexes for aoColumns/Defs and was wondering if you were planning on implementing this through aTargets or some other variable name. http://www.datatables.net/forums/discussion/7184/defining-columns-by-name-instead-of-position-aka-aocolumndefs-for-makeeditable#Item_3

fbas

I see that it is documented here: http://www.datatables.net/usage/columns

allan

Yeah its one of those tricky little things to document - as you note it is documented, but it isn't massively obvious. Useful to know about but not really in itself deserving of much documentation. I think I might write a blog post about aoColumns and aoColumnDefs at some point which might help a little...

> I saw that you were planning on allowing named indexes

I'm not quite sure I follow - sorry. Currently you can use a class name which is on the column TH element to target columns, or the magic _all or index numbers. If the columns were named (which is quite possible and could be very nice) that would probably need to be another parameter such as mDataProp or something else.

Allan

wastedspace

Thanks Allan, I can confirm this works :)

Ironically though, I no longer need this functionality, as I can now control the column visibility from the server side before it is injected into the table(!). Good to know though, as I spotted another problem... If you use the search filter, it still searches through the hidden columns too, giving head-scratching results for those who don't know about the hidden columns - unless there is a setting to stop this happening?

BTW never said. This is a fantastic tool!