0

I'm using bootstrap datatable and I need to modify the style in some of the column.

I'm at this point where I have the rowNode but I don't know how to access the column and modify its css.

var rowNode = t.row.add( [
                    "<input type='checkbox' id='parent_" + data.workItemID + "' data-toggle='collapse' data-target='#child_'" + data.workItemID + "'> </input><label for='parent_" + data.workItemID + "'></label>",
                    "<a href='#' onclick='editWorkItem(" + data.workItemID + ")'><span class='fa fa-pencil'> </span></a><button id='btnDelete' value='delete' type='button' class='btn-link' data-toggle='modal' data-object-id=" +  data.workItemID + " data-object-name=" +  data.workType + " data-target='#deleteNonInstructionalModal'> <i class='fa fa-trash'></i> </button>",
                    data.workItemID,
                    data.workType,
                    "0",
                    data.academicYear,
                    data.workItem,
                    data.description,
                    "<a href='#' data-toggle='tooltip' data-placement='left' title='" +  data.orgHierarchy + "'>" + data.orgLevel + "</a>"
                ] ).draw( false ).node();

I want to make the style="display: none;" to the column where I have the data.workItemID.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Igor
  • 1,397
  • 3
  • 24
  • 56

2 Answers2

0

Try this:

$(rowNode).find('td:eq(2)').hide();

or

$(rowNode).find('td:eq(2)').css('display', 'none');

BUT if you use display:none it will mess up the DataTable view.

you will be better off using visibility:hidden

$(rowNode).find('td:eq(2)').css('visibility', 'hidden');

Read this to know about difference between display:none and visibility:hidden

Binu Purushothaman
  • 164
  • 6
0

You hide the column with

t.column(2).visible(false);

You cannot set the visibility or display status for individual cells.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265