columnDefs: [{targets: [0,2],visible: false}] only works for Column 0 ... why?

vpalhories

Hello,

I am using the following code to hide both columns 0 and 2

columnDefs: [{
targets: [0, 2],
visible: false,
searchable: false
}]

Only the first column (0) gets hidden. I have to add table.column(2).visible(false); in order to actually hide the second column. Am I coding this incorrectly or did I misunderstand the intent of columnDefs in that it can apply attributes for more than 1 column? I've even tried the following and only column 0 gets hidden:

columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
columnDefs: [{
targets: [2],
visible: false,
searchable: false
}]

I've also tried the following: { data: "status", name: "Status", autoWidth: true, visible: false, searchable: false } and that doesn't work either. Just to be sure something wasn't amiss with column (2), I tried every other column on the table, visible only seems to apply to column 0.

Any words of wisdom from folks out there? I am using version 1.10.24 of DataTables.net.

Thanks a bunch.

--- Val

kthorngren

Your code snippet works here:
http://live.datatables.net/goretebo/1/edit

It hides the Name and Office columns.

There is something else in your code causing column 2 to be "unhidden". Please post a link to your page or update my test case to replicate the issue so we can help debug.

Kevin

vpalhories

Hey Kevin ...

I added my snippet and sure enough, it works too.

live.datatables.net/kiwihufe/1/edit

The only difference is that I'm doing a server side load of the data as well as saving the state so I removed those from the code snippet. I'm also using Moment.js to format the dates but I commented that out in the snippet.

My Ajax Call looks as follows which is right before the [ColumnDefs] section.

 ajax: {
                    url: "/TimeSheet/LoadTimeSheetEntries",
                    data: {
                        "userid": $('#@Html.IdFor(m=>m.UserId)').val(),
                        "projectid": $('#@Html.IdFor(m=>m.ProjectId)').val(),
                        "starttime": $('#@Html.IdFor(m=>m.StartDate)').val(),
                        "endtime": $('#@Html.IdFor(m=>m.EndDate)').val()
                    },
                    type: "POST",
                    datatype: "json"
                },

Other than that I also have the following at the very top. I use that because I change the Ajax Parameters on the page and resubmit the query.

 if ($.fn.dataTable.isDataTable('#timesheet')) {
                $('#timesheet').dataTable().fnDestroy();
            }

Not sure where to go from here! It's something I'm doing pretty consistently because it's the same on ALL of my tables.

--- Val

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

ServerSide processing won't affect column visibility. Can you post a link to your page so we can take a look?

Kevin

vpalhories

Kevin,

I finally got this working. I noticed that I had code like the one below within the variable declaration of the table. As soon as I moved it out, the column visibility worked.

('#timesheet tbody').on('dblclick', 'tr', function () {
...
}

Thanks for your time.

--- Val